Question

我正在学习Angular directive，我不能围绕scope话题。假设我有一个名为directive的自定义parentDirective。它具有controller属性和link属性，如下所示：

angular.module("app").directive("parentDirective", function () {
    return {
        restrict: "E",
        templateUrl: "dirs/parent.html",
        scope:{
            character: "="
        },
        controller: function ($scope) {
            $scope.getData = function (data) {
                console.log(data);
            }
        },
        link: function (scope,elem, attrs) {
            elem.bind("click", function (e) {
                //get object here?
            });
            scope.getData = function (data) {
                console.log(data);
            }
        }
    }
});

其模板定义如下：

<p ng-click="getData(character)">
    {{character.name}}
</p>

我可以通过character变量获取controller函数中的$scope对象，我可以通过{{1}访问link函数中的相同数据}。这方面两种方法的区别是什么？第二个问题，是否可以将scope绑定到click并获取如下对象：

directive

Answer 1

Scope特定于当前指令实例，并且在两个函数中都是相同的对象。

对于定义范围的方法，如果它们是在控制器或链接函数中定义的，则没有区别，除非存在需要尽早定义方法的竞争条件。因此，在控制器中定义范围方法是有意义的。

事件处理程序与其他任何函数都不同，它是

elem.on("click", function (e) {
  scope.$apply(function () {
    scope.character...
  });
});

scope.$apply(...)包装器无论如何都不会受到伤害，但它的必要性取决于scope.character会发生什么。

该指令只能controller而不能link。当前的Angular版本（1.5+）建议使用bindToController + controllerAs而不是scope绑定的样式作为指令和组件的共同基础。

然后该指令可能看起来像

restrict: "E",
template: '<p>{{$ctrl.character.name}}</p>',
controllerAs: '$ctrl',
bindToController: { character: "=" },
controller: function ($element, $scope) {
    var self = this;

    self.getData = function (data) { ... };

    $element.on("click", function (e) {
        scope.$apply(function () {
            self.character...
        });
    });
}

link功能可能显示为$postLink controller hook，但此处不需要。

Angular指令：在链接函数中控制器范围与范围之间的区别是什么？

1 个答案: