如果使用隔离范围，则无法调用指令链接方法

Question

嗨，有人可以向我解释一下我在这里缺少什么吗？

我创建了一个简单的测试指令属性，"link"。没有隔离范围，我可以通过 ng-click

调用 link 中的方法

但是一旦我添加了一个独立的作用域，它就不起作用了。

 <a test1 class="btn btn-default pull-right" form="PassedIn" ng-click="omg()">
     <span class="glyphicon glyphicon-plus" data-tooltip="New" data-tooltip-placement="left"></span>
 </a>
 <a test2 class="btn btn-default pull-right" view-model="10" ng-click="omg2()">
     <span class="glyphicon glyphicon-plus" data-tooltip="New" data-tooltip-placement="left"></span>
 </a>

指令：

.directive('test1', function() {
    return {
      restrict: 'A',
      scope: {
        form: '=form'
      },
      link: function($scope, element, attrs) {
        $scope.omg = function() {
          alert($scope.form);
        };
      }
    };
  })
  .directive('test2', function() {
    return {
      restrict: 'A',
      link: function($scope, element, attrs) {
        $scope.omg2 = function() {
          alert('hello2');
        };
      }
    };
  });

http://plnkr.co/edit/CU96ieef4iNwWmccne4t?p=preview

我很确定它与范围有关，但有人可以解释一下吗？

还有为什么我的具有独立作用域的指令调用另一个指令的 link 中的方法（我使这两个方法同名）。

.directive('test1', function() {
    return {
      restrict: 'A',
      scope: {
        form: '=form'
      },
      link: function($scope, element, attrs) {
        $scope.omg = function() {
          alert($scope.form);
        };
      }
    };
  })
  .directive('test2', function() {
    return {
      restrict: 'A',
      link: function($scope, element, attrs) {
        $scope.omg = function() {
          alert('hello2');
        };
      }
    };
  });

http://plnkr.co/edit/IEiDeV9Es6zigGxxk67s?p=preview

谢谢，凯文

Answer 1

当您指定一个独立的作用域时，该指令将获得一个仅供该指令使用的全新作用域。同样，当您不指定作用域时，将继承父作用域。

您编写 ng-click 的方式将只能访问父作用域中的方法（在您的情况下为 omg2）。

为了正确处理点击事件，应该这样做：

.directive('test1', function () {
    return {
        restrict: 'A',
        compile: function ($element, attr) {
            return function customDirectiveClickHandler(scope, element) {

                // Do standard setup here...

                element.on('click', function (event) {
                    scope.$apply(function(){
                        // All click code goes here...
                        alert('hello2');
                    });
                });
            };
        }
    };
});

您还可以通过查看 source code.

了解 Angular 实际上如何处理 ng-click（和其他事件）

如果使用隔离范围，则无法调用指令链接方法

Unable to call directive linked method if using isolated scope

javascript

directive

angularjs

angularjs-directive