角度1.4指令切换视图

托马斯·佐伊

我想显示两个不同的输入,具体取决于切换属性。

不,我有一个问题,我应该在指令中定义输入的每个属性/属性,但是绑定不起作用。

指示:

angular.module('directive')
.directive('inputBlock', function () {
    return {
        restrict: 'AEC',
        replace: true,
        scope: {
            model: '=',
            modernStyle:'=',
            name:'=',
            type:'=',
            label:'='
        },
        link: function (scope, elem, attrs, ctrl) {},
        templateUrl: 'views/templates/inputBlockTemplate.html'
    };
});

模板:

<div>
<div ng-if="!modernStyle">
<label>{{label}}</label>
<input ng-model="model" name="{{name}}" type="{{type}}"/>
</div>
 <md-input-container ng-if="modernStyle">
  <label>{{label}}</label>
  <input ng-model="model" name="{{name}}" type="    {{type}}"/>
</md-input-container>
</div>

用法:

 <input-block model="name" label="'firstname'" modern-style="true" name="'firstname'" type="'text'">
  </input-block>

是否可以执行指令中的切换之类的操作?此外,是否可以将绑定重定向到指令?

pdorgambide

ng-if 创建一个新的子范围,请尝试更改 ng-show/ng-hide

了解范围

其他注意事项:

  • 当您在指令内使用名称,标签和类型作为文本时,不必将其绑定,因此,我建议使用@而不是=,或者直接从attrslink参数访问它
  • 可以将scope.model设置为ngModel,以使用默认的angular指令。

Javascript:

angular.module("directive").directive("inputBlock", function () {
    return {
        restrict: "AEC",
        replace: true,
        scope: {    
            ngModel: "=",
            modernStyle:"@",
            //name:"@",
            //type:"@",
            //label:"@"
        },
    link: function (scope, elem, attrs, ctrl) {
         scope.type=attrs.type;
         scope.name=attrs.name;
         scope.label=attrs.label;
     },
    templateUrl: "views/templates/inputBlockTemplate.html"
    };
});

模板:

<div>
<div ng-show="!scope.modernStyle">
<label>{{scope.label}}</label>
<input ng-model="scope.model" name="{{scope.name}}" type="{{scope.type}}"/>
</div>
 <md-input-container ng-show="scope.modernStyle">
  <label>{{scope.label}}</label>
  <input ng-model="scope.model" name="{{scope.name}}" type={{scope.type}}"/>
</md-input-container>
</div>

用法:

<input-block ng-model="name" label="firstname" modern-style="true" name="firstname" type="text">
  </input-block>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章