javascript - 如何设置指令属性的默认值？

Question

我正在 AngularJS 中构建一个自定义元素。我的元素将像这样使用:

<my-element my-attribute="false"></my-element>

如果用户没有设置my-attribute，我希望它默认为true。如何给指令属性一个默认值？目前，我有以下内容:

myApp.directive('myElement', function ($window) {
  return {
    restrict:'E',
    transclude: true,
    scope: {
      myAttribute: '='
    },
    controller: function($scope) {

    },
    template: '<div>Hello <span ng-if="myAttribute == true">, World</span></div>'
  };
});

谢谢!

Answer 1

使属性可选

首先，确保将属性设为可选。使用您当前的代码，如果您的指令是这样使用的……

<!-- Notice the absence of attribute -->
<my-element></my-element> 

... 然后 AngularJS 将在您尝试将值设置为 $scope.myAttribute 时抛出 NON_ASSIGNABLE_MODEL_EXPRESSION 异常。所以，如前所述in the documentation ，在您的范围定义中添加一个询问点:

scope: {
    myAttribute: '=?',
},

定义默认值

然后，您可以简单地在 Controller 中设置默认值:

controller: function ($scope) {
    if (angular.isUndefined($scope.myAttribute)) {
        $scope.myAttribute = true;
    }
},