Question

在Angular中，我有以下场景，其中一个指令可以接受一个可选的布尔参数，默认情况下默认为 true ，无论何时未指定。

示例：

<my-directive data-allow-something="false">
    ... this works as expected as no default value should be set in this case ...
</my-directive>

<my-directive>
    ... but in this case i'd like allowSomething to equal true  ...
</my-directive>

我尝试了以下方法，但出于某种原因， true 值并不会依赖 allowSomething 。使它成为＆＃39; =？＆＃39;可选的双向绑定不起作用，因为我传递的值应该是具体的真/假而不是字段引用。

angular.module('myApp').directive('myDirective') {
    ...
    controller: function($scope){
        if (!$scope.allowSomething)
            $scope.allowSomething = true;
    },
    ....
    scope: function(){
        allowSomething: '@'
    }
    ...
}

我确定应该有一种简单的方法来实现这一点，所以我缺少什么？

以下门票提供的解决方案：Angular directive with default options 由于$ compile函数会阻止链接功能起作用，因此不足以满足我的需求。另外，传入的布尔值不是引用类型，我不能给它一个双向绑定。

Answer 1

我认为检查该值的更好方法是查找未定义的值，如下所示：

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

我曾经遇到过同样的问题，这对我有用。我认为最好的方法是使用angular的方法处理事物。

Answer 2

这就是我一直在做的事情：

HTML：

<my-directive allow-something="false"></my-directive>
<my-directive></my-directive>

指令：

angular
.module('app')
.directive('myDirective', function() {

var defaults = {
  allowSomething: true
};

return {
  restrict: 'E',
  templateUrl: '',
  scope: {},
  compile: function() {
    return {
      pre: function(scope, el, attrs) {
        scope.allowSomething = attrs.allowSomething || defaults.allowSomething;
      },

      post: function(scope, el) {
        // this is link
        // scope.allowSomething = default or whatever you enter as the attribute "false"
      }
    };
  }
};
}

在发生任何事情之前，pre被触发，然后帖子就像链接功能一样。这使我能够根据我设置的属性做动态的事情。

Answer 3

我认为你可以这样做：

 scope : true,
  link : function(scope, element, attrs){
    scope.allowSomething = $parse(attrs.allowSomething)(scope) || true;
    console.log(scope)
  }

Answer 4

鉴于您的模板是

<body>
  <my-directive></my-directive>
  <!-- <my-directive allow-something="false"></my-directive> -->
</body>

然后您可以使用link（如果不需要与其他指令进行交互，则为首选）或controller。

angular.module('myApp', [])
  .directive('myDirective', function() {
    return {
      scope: {},
      link: function(scope, element, attrs) {
        scope.allowSomething = ('allowSomething' in attrs) ? attrs.allowSomething : true;
      }, 
      template: '<div>allow:{{ allowSomething }}</div>'
    };
  });

//或

angular.module('myApp', [])
  .directive('myDirective', function() {
    return {
      scope: {
        allowSomething: '@'
      },
      controller: function($scope, $timeout) {
        $timeout(function() {
          if (angular.isUndefined($scope.allowSomething)) {
            $scope.allowSomething = true;
          }
        });
      },  
      template: '<div>allow:{{ allowSomething }}</div>'
    }; 
  });

如何在Angular Directive Scope中设置默认值？

4 个答案: