AngularJS:不能通过指令改变父作用域

AngularJS : can not change parent scope via directive

本文关键字：改变 作用域 指令 不能 AngularJS      更新时间：2023-09-26

我试图通过指令改变控制器的范围，但它没有改变。

目的是在MyCtrl中自动更改$scope.modules，当我通过指令更改模型时:

link: function (scope) {
    scope.module.title += ' changed';
    scope.module = {
        title: 'Redeclared'
    };
},

这段代码工作得很完美scope.module.title += ' changed';

但这不是:scope.module = { title: 'Redeclared' };

后美元http。获取请求，我们有一个对象与{title: 'Redeclared'}，这就是为什么我这样做scope.module = { title: 'Redeclared' };

示例:http://jsfiddle.net/8Va9Q/

你知道怎么做吗?由于

你的问题是由于范围/原型继承。

当你将'module'变量设置为一个新的引用时，你的新变量将只在你当前的作用域中被知道。在父作用域，'module'变量保持不变。

您可以看到最终结果，如: 
-> parent scope
   -> module = { title: 'foo' }
   -> child scope
       -> module = { title: 'Redeclared' }

相反，如果你只设置了'module'变量的title属性，那么父作用域的属性(在'module'变量上)将被更新。

如果你想重写这个变量，请使用angular。扩展(它将覆盖你的对象属性):

angular.extend($scope.module, {
    title: 'Redeclared'
});

你的小提琴是最新的。

这里有一个关于AngularJS作用域继承的很好的答案:在AngularJS中作用域原型/原型继承的细微差别是什么?

这是一个完美的答案，你一定要读一下。

假设$rootScope。module === directiveScope.module

那么这个"问题"是因为你没有定义引用范围。模块，而不是改变它:

var original = {name:"original"} ;
var copy = original;// copy is a reference to original (copy === original)
copy.name="copy";//mutating copy changes original
console.log(original.name);//=copy
//re assigning copy de references original
//copy no longer has a reference to original
//and carries it's own value
copy={name:"changed"};
console.log(original.name);//=copy (not changed)

传递对象变量时的一个常见错误，有时你想改变它们，但重新分配它们，从而取消引用它们，有时你不想改变它们，但意外地通过改变它们(someArray.sort()或someArray)。push("new Item")或someObject。newItem = 88…)。

角。Extend不会重新分配作用域。模块或$rootScope。模块，如下:

angular.extend(scope.module, {
    title: 'Redeclared'
});

与

相同，但比 慢。
scope.module.title="Redeclared";
如果rootScope

。模块是{somevar:22}，那么两个代码示例将以{somevar:22,title:"Redeclared"}结束它可以用于必须改变作用域的情况。模块接收json对象:

scope.module.prop1 = receivedJSON.prop1;
scope.module.prop2 = receivedJSON.prop2;
//...many more
scope.module.prop100 = receivedJSON.prop100;

用

angular.extend(scope.module, receivedJSON);

都是关于JavaScript数据类型的:这里你可以改变link (scope.module)

提供的对象选项。
scope.module.title

在这里你完全重写了整个对象(没有链接)

scope.module

所以对你来说，最好这样做:不是

   $scope.modules = [{
        title: 'test 0'
    }, {
        title: 'test 1'
    }, {
        title: 'test 2'
    }];

, 

$scope.modules.push(title: 'test 0'})
$scope.modules.push(title: 'test 1'})
$scope.modules.push(title: 'test 2'})
相关文章：