1
Я использую angular.ui tabset. Я знаю, что он использует transclude и имеет изолированную область видимости, но я не понимаю следующего поведения:Angularjs ng-click внутри изолированного пространства вызывает функции в области видимости outter
Если я устанавливаю ng-модель внутри директивы, то угловое связывает ее с областью действия директивы. Это то, что я ожидал, но если вызов выполняется с помощью ng-click (внутри директивы), вызывается функция scope 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);
}
});
Спасибо.
Я до сих пор не понимаю, что именно у вас проблем? Я помещаю ваш код в JSFiddle, и он работает так, как я ожидал, - когда я нажимаю кнопку, я получаю предупреждение с «002 - Test2» –