Angular 使用嵌入的自定义指令上的 ng-controller 范围

Question

我还是 Angular 的新手，所以如果这是一个愚蠢的问题，我深表歉意...我有一个使用嵌入的自定义指令，我正在尝试了解数据绑定的工作原理如果我将 ng-controller 分配给父元素，而不是当我将控制器直接分配给它时：

代码：

angular.module('HelloWorld', [])

.controller('HelloController', function($scope) {
  $scope.name = 'you'
})

.directive('hello', function() {
  return {
    restrict: 'E',
    transclude: true,
    template: '<ng-transclude />'
  };
});

HTML:

<!-- why does this one work? -->
<div ng-controller="HelloController">
  <hello>Hi there, {{name}}!</hello>
</div>

<!-- but not this one? -->
<hello ng-controller="HelloController">
  <p> Hi there, {{name}}!</p>
</hello>

笨蛋：https://plnkr.co/edit/ICztHcKU4W2EgFmy8OqQ?p=preview

有什么想法吗？

Answer 1

指令被定义为一个函数，returns一个对象（具有模板、绑定、控制器和其他属性）被编译成一个元素。

无论您放入元素中的什么属性都会传递给指令绑定（或隔离范围），它不会被解释。

从技术上讲，您可以将控制器作为属性传递给您的指令，但这看起来不是一个好的做法，因为指令有一个控制器属性。

例如这会起作用：https://plnkr.co/edit/WknbSDI4HlQyp2vQIkbR?p=preview

angular.module('HelloWorld', [])

.controller('HelloController', function($scope) {
  $scope.name = 'you'
})

    .directive('hello', function() {
      return {
        restrict: 'E',
        scope: {
          ngController: '&'
        },
        transclude: true,
        template: '<ng-transclude />',
        controller: ngController
      };
    });

但你看你可以使用

controller: function() {}

直接在指令内部，这将使它更加独立。

Angular 使用嵌入的自定义指令上的 ng-controller 范围

Angular scope from ng-controller on custom directive that uses transclusion

angularjs

angularjs-ng-transclude