是否可以使用 scope: true 从 Angular 指令更新父作用域? [英] Is it Possible to Update Parent Scope from Angular Directive with scope: true?

问题描述

我需要从指令中的父控制器继承范围.我不一定要离开 scope: false.我也不一定要使用独立的作用域，因为它需要做很多工作才能正确链接我关心的值(想想父控制器中的很多值).

如果我想更新父作用域，在我的指令中使用 scope:true 是否有意义?

你好，{{name}}！<我的指令></我的指令>

var myApp = angular.module('myApp',[]);//myApp.directive('myDirective', function() {});//myApp.factory('myService', function() {});函数 MyCtrl($scope) {$scope.name = '戴夫';}myApp.directive('myDirective', function() {返回 {范围:真实，限制:'EA'，链接:功能(范围，元素，属性){scope.updateName = function(newName) {console.log('newName 是:' + newName);scope.name = newName;}},模板:'<input ng-model="updatedName" placeholder="new name value"><button ng-click="updateName(updatedName)">更新</button>'}})

请查看小提琴

解决方案

虽然@user1737909 已经引用了 SO 问题来阅读 (AngularJS 中范围原型/原型继承的细微差别是什么?，它将解释问题并推荐各种解决方法)，我们通常会尝试在 SO 上给出答案.

因此，您的小提琴不起作用的原因是因为当写入原始类型(即字符串、数字或布尔类型)时 -- 例如，scope.name = newName--写入"总是进入本地范围/对象.换句话说，子作用域拥有自己的 name 属性，该属性隐藏了同名的父属性.解决方法是在父作用域中使用对象，而不是原始类型.然后子作用域将获得对该对象的引用.对对象属性的任何写入(无论是来自父级还是子级)都将转到该对象.(子作用域没有得到自己的对象.)

$scope.obj = {name: 'Dave'};

然后在您的指令中:

scope.obj.name = newName;

和 HTML:

你好，{{obj.name}}！

小提琴

I have a need for inheriting scope from a parent controller in a directive. I don't necessarily want to leave scope: false. I also don't necessarily want to use an isolated scope, because it requires a lot of work to get the values I do care about linked properly (think lots of values in a parent controller).

Does it make sense to use scope:true in my directive if I want to update parent scope?

<div ng-controller="MyCtrl">
      Hello, {{name}}!
        <my-directive></my-directive>
</div>

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Dave';
}


myApp.directive('myDirective', function() {
    return {
        scope: true,
        restrict: 'EA',
        link: function(scope, elem, attrs) {
            scope.updateName = function(newName) {
                console.log('newName is: ' + newName);
                scope.name = newName;
            }
        },
        template: '<input ng-model="updatedName" placeholder="new name value"> <button ng-click="updateName(updatedName)">Update</button>'
    }
})

Please check out the fiddle

解决方案

Although @user1737909 already referenced the SO question to read (What are the nuances of scope prototypal / prototypical inheritance in AngularJS?, which will explain the problem and recommended various ways to fix it), we normally try to give the answer on SO.

So, the reason your fiddle doesn't work is because when a primitive type (i.e., a string, number, or boolean type) is written to -- e.g., scope.name = newName -- the "write" always goes to the local scope/object. In other words, the child scope gets its own name property that shadows the parent property of the same name. The fix is to use an object, rather than a primitive type, in the parent scope. The child scope will then get a reference to that object. Any writes to the object properties (whether from the parent or the child) will go to that one object. (The child scope does not get its own object.)

$scope.obj = {name: 'Dave'};

Then in your directive:

scope.obj.name = newName;

and HTML:

Hello, {{obj.name}}!

fiddle

这篇关于是否可以使用 scope: true 从 Angular 指令更新父作用域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！