javascript - AngularJS:更改$ rootScope变量不会更改ng-model中的第一个选定选项

我有一个似乎无法破解的特定问题。

在html中，我有以下代码：

<select ng-model="$parent.proizvod"  ng-options="i.id_proizvod as i.proizvod for i in proizvodiServer">
   <option>Select</option>
 </select>

在我的控制器中：

  $rootScope.proizvod = '1';

因此，当页面首次加载时，将选择第一个选项。如果将$rootScope.proizvod = '1';更改为$rootScope.proizvod = '3';，它将加载第三个选项。

现在，当您选择其他值时，它将存储在$rootScope.proizvod中，但是稍后，在某些功能中，我想将该$rootScope.proizvod重置为“ 1”，但它似乎不起作用。

我在这里想念什么？

附言如果没有$parent.proizvod，我的选择甚至不会更改$rootScope.proizvod值。

编辑：这是另一个功能：

$rootScope.upisPodataka = function() {
      setTimeout(function () {
      $rootScope.proizvod = '1';
      $scope.$apply();
       }, 2000);
      $state.go('app.podesenost_grilla', {}, {
        reload: true
      });

单击按钮即可调用upisPodataka函数。

最佳答案

不能保证在所有情况下都使用ng-model='$parent.proizvod'更新$rootScope。

  新的AngularJS开发人员通常不会意识到ng-repeat，ng-switch，ng-view，ng-include和ng-if都创建了新的子作用域，因此当涉及这些指令时，常常会出现问题。

  — AngularJS Wiki - Understanding Scopes

如果ng-model在子范围内设置值。子作用域具有其自己的属性，该属性隐藏/阴影相同名称的父属性。 AngularJS并没有这样做-这就是JavaScript原型继承的工作方式。阅读维基。

因此问题就变成了$parent.$parent.proizvod吗？也许$parent.$parent.$parent.proizvod？是否通过反复试验来做到？

一种更可靠的方法是使用ng-change directive更新变量。

<select ng-model="vm.proizvod" ng-change="vm.update()"
        ng-options="i.id_proizvod as i.proizvod for i in proizvodiServer">
   <option>Select</option>
</select>

vm.update = function () {
    $rootScope.proizvod = vm.proizvod;
    console.log($rootScope.proizvod);
});

代替使用$rootScope，考虑使用custom service存储变量。

  $rootScope存在，但可以用于邪恶

  AngularJS中的范围形成了一个层次结构，典型地是从树顶部的根范围继承的。通常这可以忽略不计，因为大多数视图都有其自身的控制器，因此也具有作用域。

  有时候，有些数据要对整个应用程序进行全局处理。对于这些，您可以像其他作用域一样注入$rootScope并在其上设置值。由于作用域是从根作用域继承而来的，因此这些值将可用于与ng-show之类的指令相连的表达式，就像本地$ scope上的值一样。

  当然，全局状态很糟糕，您应该谨慎使用$rootScope，就像（希望）使用任何语言的全局变量一样。特别是，不要将其用于代码，而仅用于数据。如果您想在$rootScope上放置一个函数，最好总是将其放在可以在需要的地方注入并且更容易测试的服务中。

  相反，请勿创建服务，其唯一的目的就是存储和返回数据位。

  — AngularJS FAQ

使用$ timeout而不是window.setTimeout

$rootScope.upisPodataka = function() {
      //setTimeout(function () {
      $timeout(function () {
         $rootScope.proizvod = '1';
         //$scope.$apply();
      }, 2000);
      $state.go('app.podesenost_grilla', {}, {
        reload: true
      });
};

$timeout service包装windows.setTimeout并将其与AngularJS框架及其摘要循环集成。然后，不需要$apply()。

另外，测试时可以使用$timeout.flush()。

关于javascript - AngularJS:更改$ rootScope变量不会更改ng-model中的第一个选定选项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42736301/