angularjs - 在 Angular 指令中初始化 @attr

Question

我有这样的指令：你可以在这里看到等效的 plunker http://plnkr.co/edit/0e2nMyatAMD3M3QTCtls

app.directive('bpTest', function() {
  return {
    restrict: 'A',
    templateUrl: 'directiveTemplate.html',
    scope: {
      bpType: '@'
    },
    link: function($scope, $elem, $attrs) {
      console.log($scope, $elem, $attrs);
      $scope.bpType = $scope.bpType || 'text';
    }  // link function
  };
});

在directiveTemplate.html 中：

<div>
  {{ bpType }}
</div>

在 index.html 中：

<div bp-test bp-type="text"></div>  <!-- results in <div>text</div> -->
<div bp-test bp-type="number"></div>  <!-- results in <div>number</div> -->
<div bp-test></div>  <!-- results in <div></div> ????? -->

由于我初始化，我希望显示$scope.bpType = $scope.bpType || 'text'第三个指令，但它只是吐出。<div bp-test></div><div>text</div><div></div>

我有什么误解/做错了什么？

谢谢！

Answer 1

范围绑定发生在第一次调用链接函数之后，因此您需要查看属性以设置默认值。

$scope.$watch("bpType", function(value) {
  $scope.bpType = value || 'default';
});

Answer 2

您的链接功能应如下所示：

scope: {  
},
link: function(scope, elem, attrs) {
      scope.bpType = attrs.bpType || 'text';
} 

注意 $attrs.bpType 不是 $scope.bpType 另外，按照惯例，链接函数中的参数不应使用 $prefix 命名，因为它们是函数参数，而不是注入的依赖项。