Question

我有一个自定义指令，可能有也可能没有带值的属性。如果用户没有为属性指定值，我想指定一个默认值。但是，当我这样做时，我的范围内的值始终为null，就像这个Plunkr

一样

我做错了什么？

指令：

var app = angular.module('app', []);

app.directive('variable', function(){
  return {
   restrict: 'E',
   replace: true,
   template: '<h2>Directive value: {{ test  }}</h2>',
   scope: {
     test: '@'
   },
   controller: function($scope){
     $scope.test = 'code assignment'; 
   }

  };
});

HTML：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <variable></variable>
    <variable test="html assignment"></variable>
  </body>

</html>

Answer 1

在使用您传入的指令属性构建模板之前发生$scope.test赋值。因为您没有声明任何test属性，所以指令使用$scope.test呈现为undefined。

如果您只想要一个默认值，您应该执行以下操作，您无需定义控制器，使您的代码更清晰，更小。

app.directive('variable', function(){
  return {
   restrict: 'E',
   replace: true,
   template: '<h2>Directive value: {{ test || "default value" }}</h2>',
   scope: {
     test: '@'
   }
  };
});

请参阅此working demo

但如果您确实需要为指令scope指定默认值，则可以使用compile这样的功能：

app.directive('variable', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<h2>Directive value: {{ test  }}</h2>',
    scope: {
      test: '@'
    },
    compile: function(element, attrs) {
      if (!attrs.test) {
        attrs.test = 'default value';
      }
    }
  };
});

请参阅此working demo

Answer 2

我相信你需要使用link（）方法。这样，您可以检查范围变量是否为null并指定默认值，然后手动创建模板并将其添加到元素中。请注意，范围变量仍然是绑定的。

app.directive('variable', function(){
  return {
   restrict: 'E',
   replace: true,
   scope: {
     test: '@'
   },
   link: function(scope, element) {

     if(scope.test === null) {
       scope.test = 'default value';
     }

     var template = "<h2>Directive value: {{ test  }}</h2>";

     element.html(template);
   }
  };
});

为指令中的范围赋值不起作用

2 个答案: