Question

我刚刚遇到一个问题，我似乎只能将函数分配给范围并执行它们，如果我在指令的控制器函数内执行它，而不是在链接中。 Plunkr这里的例子。

任何人都可以解释这种行为吗？

app.js

var app = angular.module('app', []);

app.directive('linkDir', function(){
  return {
    restrict: 'E',
    template: '<button ng-click="press()">Link</button><p>{{ linkmsg  }}</p>',
    link: function(scope){
      scope.press = function(){
        scope.linkmsg = 'link function executed'
      }
    }
  };
});

app.directive('controllerDir', function(){
  return {
    restrict: 'E',
    template: '<button ng-click="press()">Controller</button><p>{{ controllermsg  }}</p>',
    controller: function($scope){
      $scope.press = function(){
        $scope.controllermsg = 'controller function executed';
      }
    }
  };
});

HTML

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <link-dir></link-dir>
    <controller-dir></controller-dir>
  </body>

</html>

Answer 1

两个指令都将名为press()的函数添加到同一范围。所以最后一个执行获胜，并覆盖前一个添加到范围的press()函数。使用不同的名称，两者都有效：

app.directive('linkDir', function(){
  return {
    restrict: 'E',
    template: '<button ng-click="press1()">Link</button><p>{{ linkmsg  }}</p>',
    link: function(scope){
      scope.press1 = function(){
        scope.linkmsg = 'link function executed'
      }
    }
  };
});

app.directive('controllerDir', function(){
  return {
    restrict: 'E',
    template: '<button ng-click="press2()">Controller</button><p>{{ controllermsg  }}</p>',
    controller: function($scope){
      $scope.press2 = function(){
        $scope.controllermsg = 'controller function executed';
      }
    }
  };
});

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

只能在控制器功能中指定范围内部指令的函数，而不是链接

1 个答案: