Question

将控制器添加到元素指令时，例如：

.directive('hello', function() {

   return {     
     restrict: 'E',
     replace: true,
     transclude: true,
     template: '<div class="hello" ng-transclude></div>'
   };

});

我无法访问控制器的范围：

.controller('HelloCtrl', function($scope) {  
  $scope.hello = "Hello World";
});


<hello ng-controller="HelloCtrl">
  <h1>Hello Directive</h1>

  <p>{{ hello }}</p>
</hello>

在这种情况下，{{ hello }}未定义。该指令不会创建子项，也不会创建独立的范围。我还尝试使用{{ $parent.hello }}访问该媒体资源。

这里发生了什么？

我创建了一个CodePen来演示此行为：http://codepen.io/jviotti/pen/ktpbE

Answer 1

根据文档...

transclude使得带有此选项的指令的内容可以访问指令之外的范围而不是内部。

因此，您需要将ng-controller =“HelloCtrl”声明移动到范围更高的元素。

以下是您的CodePen已修复http://codepen.io/anon/pen/BjKHG

将控制器添加到元素指令

1 个答案: