Question

我正在使用angular.ui tabset指令。我知道它使用了transclude并且具有独立的范围，但我不理解以下行为：

如果我在指令中设置了ng-model，则angular将它绑定到指令范围。这就是我的预期，但如果使用ng-click（在指令内）进行调用，则调用outter范围函数。

有人能帮我理解吗？

<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);
    }
});

感谢。

Answer 1

这是有效的，因为您的子范围是从父范围继承的。

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

Angularjs ng-click在隔离范围内调用外部范围上的函数

1 个答案: