为什么我不能覆盖这样一个变量的值？ [英] Why can't I overwrite the value of a variable like this?

问题描述

我试图找出为什么我无法覆盖通过分离范围传递给angularJS指令值（ @ ）。我试图覆盖 vm.index 具有以下值：

I'm trying to figure out why I'm having trouble overwriting a value passed to an angularJS directive via an isolate scope (@). I try to overwrite the value of vm.index with the following:

vm.index = parseInt函数（vm.index，10）

然而，这并不出于某种原因。

However, it doesn't work for some reason.

如果我将其更改为：

vm.newIndex = parseInt函数（vm.index，10）

它的工作原理。此外，分配上的 $范围值的作品。

It works. Also, assigning the value on the $scope works.

为什么没有第一种方法的工作？

Why doesn't the first method work?

我已经创造了这个参考例如plunker 。

推荐答案

当你使用 @ 这里这就需要从属性值与 {{ }} 插补指令。而且好像指令是越来越加载第一和放大器;那么 vm.index 价值得到评估。因此，改变也不会在目前的消化周期内发生。如果你想那些要体现你需要运行使用$超时更安全的方式消化周期。

As you used @ here which need value from an attribute with {{}} interpolation directive. And seems like directive is getting loaded first & then the vm.index value is getting evaluated. So the changes are not occurring in current digest cycle. If you want those to be reflected you need to run digest cycle in safer way using $timeout.

$timeout(function(){
  vm.index = parseInt(vm.index, 10)
})

以上的事情是确保值转换为十进制值。加入将发生在上指令HTML ＆LT; H2＆GT;项目{{vm.index + 1}}＆LT; / H＆GT;

工作演示

根据@dsfq＆安培;我的讨论中，我们通过角 <去code> $编译 API，和放大器;发现他们是一个方法调用<一个href=\"https://github.com/angular/angular.js/blob/8a1eb1625c080445ce1e519762e1f2d4fd842b72/src/ng/compile.js#L2559\"相对=nofollow> initializeDirectiveBindings 它获取只调用当我们使用 controllerAs 在一个孤立的范围指令。在这个函数有开关的情况下的各种绑定 @ ， = 和＆放大器; ，这样你使用 @ 这意味着一种方式结合以下开关的情况下code被调用。

As per @dsfq & my discussion we went through the angular $compile API, & found that their is one method call initializeDirectiveBindings which gets call only when we use controllerAs in directive with an isolated scope. In this function there are switch cases for the various binding @,= and & , so as you are using @ which means one way binding following switch case code gets called.

code

case '@':
    if (!optional && !hasOwnProperty.call(attrs, attrName)) {
        destination[scopeName] = attrs[attrName] = void 0;
    }
    attrs.$observe(attrName, function(value) {
        if (isString(value)) {
            destination[scopeName] = value;
        }
    });
    attrs.$$observers[attrName].$$scope = scope;
    if (isString(attrs[attrName])) {
        // If the attribute has been provided then we trigger an interpolation to ensure
        // the value is there for use in the link fn
        destination[scopeName] = $interpolate(attrs[attrName])(scope);
    }
    break;

在上面code可以明确看到，他们把 ATTRS。$观察这是观察者的一个排序这是一般使用时的价值是一个像插值在我们的情况是一样的 {{指数}} ，这意味着这个 $观摩被评估时，消化周期运行，这就是为什么你需要把 $超时同时使首页值小数。

In above code you can clear see that there they placed attrs.$observe which is one sort of watcher which is generally used when value is with interpolation like in our case it is the same {{index}}, this means that this $observe gets evaluated when digest cycle run, That's why you need to put $timeout while making index value as decimal.

究其原因是因为他使用 = 提供两种方式的结合@dsfq回答这些作品code未从隔离范围，将直接守望取值，<一个href=\"https://github.com/angular/angular.js/blob/8a1eb1625c080445ce1e519762e1f2d4fd842b72/src/ng/compile.js#L2588-L2630\"相对=nofollow> 这里是code 。因此，没有消化周期价值得到更新。

The reason @dsfq answer works because he use = provides two way binding which code is not putting watcher directly fetching value from the isolated scope, here is the code. So without digest cycle that value is getting updated.

这篇关于为什么我不能覆盖这样一个变量的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！