角 - 更改范围没有得到体现 [英] Angular - Changing scope is not getting reflected

问题描述

这是奇怪的，因为它应该是pretty简单。我先发布我的code，然后问这样一个问题：

This is weird as it should be pretty straightforward. I will post my code first and then ask the question:

HTML -

<div ng-controller="myController" ng-switch on="addressCards">

    <div>
        {{addCustom}} // does not get changed
        <div ng-if="addCustom === false">

            {{addCustom}} // does get changed
            <button type="button" class="btn btn-primary btn-icon-text" ng-click="addCustom = true">
                <span class="icon icon-plus"></span>
                click here
            </button>
        </div>
    </div>
</div>

控制器 -

(function(){
'use strict';

angular.module('myApp')
    .controller('myController',['$scope',myController]);


function myController($scope){ 

    $scope.addCustom = false;

}


})();

所以我简单介绍一个范围的变量 - addCustom - 在我的控制器，并将其设置为false为默认值。此变量控制是否显示与否的div。我还在2个不同的位置上输出的HTML的范围的值。请参见上面。

So I simply introduced a scope variable - addCustom - in my controller and set it to false as default. This variable controls if a div is shown or not. I am also outputting the value of the scope on the html at 2 different locations. Please see above.

但是，当我在改变其值这个范围内的div NG-点击，它的价值在第二位置改变第一个（在div内），但不（在div外）。正因为如此股利不改变状态为好。

But when I change its value in an ng-click within this divs, its value is changing at the second location(within the div) but not the first one(outside the div). Because of this the div does not change state as well.

我不能推测可能是什么可能错在这里。是否有人可以帮助？

I am not able to figure what might be possibly wrong here. Can someone please help?

推荐答案

事情发生的事情是，当你有 NG-重复， NG-开关和 NG-如果指令，棱角分明的那些元素创建子作用域无论它们被放置。这些新创建的范围是中典型从那里父作用域继承。

The thing happening is when you have ng-repeat,ng-switch and ng-if directive, angular creates child scope for those element wherever they are placed. Those newly created scope are prototypically inherited from there parent scope.

如果你有范围层次，那么父 scope属性是子范围内访问，只有在这些属性是（最初对象引用传递给子范围对象，而无需创建其新的参考）。但原始数据类型都没有孩子域内访问，如果你看着你的code addCustom 范围的变量是原始数据类型。

If you have scope hierarchy, then parent scope property are accessible inside child scope, only if those property are object (originally object referenced is passed to child scope without creating its new reference). But primitive datatypes are not accessible inside child scope and if you looked at your code addCustom scope variable is of primitive dataType.

在这里你有 myController的控制器，它具有 addCustom 基本类型和放大器的范围变量;正如我上面 NG-开关＆放说， NG-如果指令编译他们创建的元素新的子范围。因此，在当前的标记有 NG-开关在 NG-控制器=myController的 DIV本身。对于内部HTML它创造了一个孩子的范围。如果你想获得孩子（基本型）里面父范围，你可以之前范围的变量名称中使用 $父符号。现在，您可以访问由 $ parent.addCustom 的 addCustom 值。
在这里，它没有结束时，编译器的角度来 NG-如果 DIV，它再次创造新的子范围。现在的内壳 NG-如果将再次有是从中典型继承父子范围。不幸的是你的情况，你有原始数据类型的变量，所以你需要再次使用 $父符号。所以，在 NG-如果 DIV，你可以这样做 $父。$父访问 addCustom 。 addCustom 。这 $父的事情会解决你的问题，但有它在HTML将使不可读和紧密地结合到它的父作用域（在UI假设你有5个孩子的范围，然后它会看起来那么可怕，比如 $母公司。母公司$，$母公司。母公司$ ）。因此，而你应该去下面的方法。

Here you have myController controller which has addCustom scope variable of primitive type & as I said above ng-switch & ng-if directive are compiled they do create new child scope on that element. So in your current markup you have ng-switch on ng-controller="myController" div itself. For inner html it had created a child scope. If you wanted to access parent scope inside child(primitive type) you could use $parent notation before scope variable name. Now you can access the addCustom value by $parent.addCustom. Here its not over when angular compiler comes to ng-if div, it does create new child scope again. Now inner container of ng-if will again have child scope which is prototypically inherited from parent. Unfortunately in your case you had primitive dataType variable so you need to use $parent notation again. So inside ng-if div you could access addCustom by doing $parent.$parent.addCustom. This $parent thing will solve your problem, but having it on HTML will make unreadable and tightly couple to its parent scope(suppose on UI you would have 5 child scope then it will look so horrible like $parent.$parent.$parent.$parent). So rather you should go for below approach.

所以我说，你需要创建像一些对象 $ scope.model = {} 并添加 addCustom 属性吧。因此，它会按照原型继承原则和儿童范围将使用已经由父创建相同的对象。

So I'd say that you need to create some object like $scope.model = {} and add addCustom property to it. So that it will follow the prototypal inheritance principle and child scope will use same object which have been created by parent.

angular.module('myApp')
.controller('myController',['$scope',myController]);
 function myController($scope){ 
    $scope.model = { addCustom : false };
}

和HTML的，你会使用 model.addCustom 而不是 addCustom

And on HTML you will use model.addCustom instead of addCustom

标记

<div ng-controller="myController" ng-switch on="addressCards">
    <div>
        {{model.addCustom}} // does not get changed
        <div ng-if="model.addCustom === false">

            {{model.addCustom}} // does get changed
            <button type="button" class="btn btn-primary btn-icon-text" ng-click="model.addCustom = true">
                <span class="icon icon-plus"></span>
                click here
            </button>
        </div>
    </div>
</div>

处理此类问题的是，在使用HTML的控制器使用 controllerAs 图案的其他最佳途径。

Other best way to deal with such kind of issue is, use controllerAs pattern while using controller on HTML.

标记

<div ng-controller="myController as myCtrl" ng-switch on="addressCards">
    <div>
        {{myCtrl.addCustom}} // does not get changed
        <div ng-if="myCtrl.addCustom === false">

            {{myCtrl.addCustom}} // does get changed
            <button type="button" class="btn btn-primary btn-icon-text" ng-click="myCtrl.addCustom = true">
                <span class="icon icon-plus"></span>
                click here
            </button>
        </div>
    </div>
</div>

这篇关于角 - 更改范围没有得到体现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！