如何将 `required` 属性添加到 angularjs 指令

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 属性是布尔值，隔离范围绑定的 none 将起作用：

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

而是注入并使用 $attrs 对象：

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

控制器使用 $attrs 对象检测规范化 required 属性是否存在，并将 vm.required 设置为 true 或 false.

有关详细信息，请参阅

如何将 `required` 属性添加到 angularjs 指令

how to add `required` attribute to angularjs directive

attributes

angularjs

angularjs-directive