Question

我定义了简单的指令，如下所示：

(function () {
    'use strict';

    angular
        .module('myApp')
        .directive('biSelect', biSelect);

    function biSelect($compile) {
        var directive = {
            restrict: 'E',
            templateUrl: 'bi-select.html',
            scope: {
                required: '=?required'
            },
            controller: BiSelectController,
            controllerAs: 'vm'
        };

        return directive;
    }

    function BiSelectController() {
        var vm = this;
    }
})();

这是指令模板：

<select class="form-control">
    <option value=""></option>
</select>

现在，我想将required属性传递给指令中的select，例如：

<bi-select required></bi-select>

我该怎么做？

Answer 1

在模板中使用ng-required指令：

  <select ng-required="vm.required">
    <option value=""></option>
  </select>

由于required属性是布尔值，所以任何隔离范围绑定都无效：

scope: {
    //WONT work
    //required: '=?required'
},

相反，注入并使用$attrs对象：

function BiSelectController($attrs) {
    var vm = this;
    vm.required = !!$attrs.$attr.required;
}

控制器使用$attrs对象检测归一化required属性的存在或不存在，并将vm.required设置为true或false。

有关更多信息，请参见

如何在angularjs指令中添加`required`属性

1 个答案: