AngularJS在隔离范围内单击会在外部范围内调用函数

debugcn 发表于 Dev

法比奥·吉布森（Fabio Gibson）

我正在使用angular.ui tabset指令。我知道它使用transclude并具有隔离范围，但是我不理解以下行为：

如果我在指令内部设置了ng-model，则angular将其绑定到指令范围。这就是我所期望的，但是如果使用ng-click（在指令内部）进行调用，则会调用外部作用域函数。

有人可以帮我理解吗？

<html data-ng-app="test">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div data-ng-controller="Ctrl">
 Outter scope id: {{ $id }}

  <tabset>
    <tab heading="Tab 1">
        <p>Inner scope id: {{ $id }}</p>

        <input type="text" data-ng-model="name" />
        <p>This model is bound on inner scope: {{ name }}</p>

        <p>
          <button data-ng-click="foo()">Invoke Foo</button>
          This button is inside inner scope but invokes foo() on outter scope.
        </p>
    </tab>
  </tabset>

</div>
</body>
</html>

和javascript代码：

angular.module('test', ['ui.bootstrap']).controller('Ctrl', function ($scope) {
    $scope.name = "Test";

    $scope.foo = function() {
      alert($scope.$id + ' - ' + $scope.name);
    }
});

谢谢。

除夕

之所以可行，是因为您的子范围继承自父范围。

请在此处查看更多信息https://github.com/angular/angular.js/wiki/Understanding-Scopes

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。