Question

我有一个angular指令使用=运算符来双向绑定具有其父作用域属性的隔离作用域：

app.directive('nestedDirective', function(){
    return {
        scope: {
            model: '='
        },
        link: function($scope){
            ...
        }
    }
});

我知道$ scope.model的任何更改都会传播到父作用域。但是，删除$ scope.model不会传播。 delete($scope.model)我的问题是：如何删除引用的变量并将删除传播到父范围。

This codepen应该说明我不想做的事情（甚至不看范围引发事件）

Answer 1

这个问题经常被问到，所以我首先要提到wiki article。

基本上，遵循“点规则”：如果您需要修改属性（直接），请将其范围放在另一个属性下，以便JS原型继承可以启动：

var model = {prop: "val"};
var a = {model: model};

model = null;
console.log(a.model.prop); // prints val

var b = {a: a};
a.model = null;

console.log(b.a.model); // prints null

这里也是一样的（即使这不使用原型继承来保持简单）。

Answer 2

我已经编辑了下面的代码笔源代码，我确信有一种更简单的方法可以做到这一点，但我刚试过这个并且它有效，它应该让你在正确的道路上开始：

<ul ng-app="app" ng-controller="ctrl">
  <dir model="data.children" child="child" ng-repeat="child in data.children"></dir>
</ul>

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

app.controller('ctrl', function($scope){
  $scope.data = {};
  $scope.data.children = [
    {name: 'Ben'},
    {name: 'Heffler'},
    {name: 'Schubert'} 
  ];

  $scope.$watchCollection('data.children', function(){
    console.log("children shallow watch", $scope);
  });
  $scope.$watch('data.children', function(){
    console.log("children deep watch",$scope);
  }, true);
});

app.directive('dir', function(){
  return {
    restrict: 'E',
    scope: {
      model: '=',
      child:'='
    },
    replace: true,
    template: '<div>{{child.name}} <button ng-click="remove()">Remove</button></div>',
    link: function(scope, element, attrs){
      scope.remove = function(){
        // I'm just deleting the first one as an example.
        delete(scope.model[0]);
        console.log("children inner scope", scope)
      }
    }
  };
});

我不确定您为什么要删除这些属性，但我确定您有理由，只是为了告诉您这是可能的。

编辑

以下是已编辑的代码笔（请参阅控制台日志以查看范围内已删除的项目）。 http://cdpn.io/Ghmvk

从隔离范围内删除引用的范围对象 - angular.js

2 个答案: