角度1.2.16，隔离范围，父函数和ng点击

Angular 1.2.16, isolated scope, parent function and ng-click

本文关键字：函数 ng 点击 隔离 角度 范围      更新时间：2023-09-26

我被Angular的一个相当简单的问题难住了（因为我认为它很简单）。有时Angular会让我觉得自己很笨，因为我不可能做错了什么。

拿着这个plnkrhttp://plnkr.co/edit/BmM9C5zjDAIfGTVzkU29?p=preview

HTML:

<body ng-app="app">
  <div ng-controller="ASDF">
    <div fb-login="doh" ng-click="exec()">CLICKY (should execute parent scope function but doesnt)</div>
  </div>
</body>

Javascript：

angular.module('app', [])
.controller('ASDF', function($scope){
   $scope.doh = function(d){
      alert(d);
   }
})
.directive('fbLogin', function(){
   return {
     restrict: 'A',
     replace: false,
     scope: {
       done: '&fbLogin'
     },
     link: function(scope){
       scope.exec = function(){
         scope.done()('asdf');
       };
     }
   }
});

这是怎么回事？

1.2版本中的隔离作用域是真正隔离的（请参阅https://github.com/angular/angular.js/commit/909cabd36d779598763cc358979ecd85bb40d4d7)

修复（$compile）：使隔离范围真正隔离

修复了隔离范围泄漏到其他地方的问题同一元素上的指令。

隔离作用域现在仅可用于隔离指令请求它及其模板。

非隔离指令不应获得隔离的隔离范围指令，相反，它们将接收原始scope（它是新创建的隔离作用域的父作用域）。

与托比亚斯配对。

BREAKING CHANGE:没有隔离范围的指令不会获得将作用域与同一元素上的隔离指令隔离开来。如果您代码取决于此行为（非隔离指令需要访问隔离范围内的状态），将隔离指令更改为使用scope locals显式传递这些。

//在之前

.指令（'ngIsolate'，function（）｛return{作用域：｛｝，模板："｛｛value｝｝"｝；｝）；

//在之后

.指令（'ngIsolate'，function（）｛return{作用域：｛value:"=ngModel"｝，模板："｛｛value｝｝；｝"）；

然后它现在唯一的工作方式是通过template/templateUrl（在这种情况下使用transclude，所以我不需要重新创建它）：

angular.module('app', [])
.controller('ASDF', function($scope){
   $scope.doh = function(d){
     alert(d);
  }
})
.directive('fbLogin', function(){
   return {
     restrict: 'A',
     replace: false,
     scope: {
       done: '&fbLogin'
     },
     transclude: true,
     template: '<div ng-transclude ng-click="exec()"></div>',
     link: function(scope){         
       scope.exec = function(){
         scope.done()('asdf');
       };
     }
   }
});

因为ng click只能访问父作用域，所以它试图在ASDF控制器的作用域上执行exec。

我相信这会给你想要的行为：

HTML:

<body ng-app="app">
  <div ng-controller="ASDF">
    <div fb-login="doh">CLICKY (should execute parent scope function but doesnt)</div>
  </div>
</body>

Javascript：

angular.module('app', [])
.controller('ASDF', function($scope){
   $scope.doh = function(d){
      alert(d);
   }
})
.directive('fbLogin', function(){
   return {
     restrict: 'A',
     replace: false,
     scope: {
       done: '&fbLogin'
     },
     link: function(scope, element){
       element.on("click", function () { scope.done()('asdf') });
     }
   }
});
相关文章：