时间戳

首页 > 解决方案 > 为什么从控制器更改值时指令模板中的 ng-model 不更新

angularjs - 为什么从控制器更改值时指令模板中的 ng-model 不更新

问题描述

我正在使用指令，并且通过两种方式绑定，我正在更改最初传递给指令的日期对象变量。

但是当我对日期变量进行一些更改时

$scope.valueee = 1;
$scope.press = function(){
    $scope.searchterm.setHours($scope.valueee++, 0, 0, 0);
  if(!$scope.$$phase)$scope.$apply()
}

但它不会使用指令内模板视图中的 ng-model 更新视图

'ng-model="term"'

以下是代码示例

jsfiddle链接

标签： angularjsangularjs-directivedirective

解决方案

我认为您在直接绑定到原语时遇到了这个问题： https ://github.com/angular/angular.js/wiki/Understanding-Scopes

强调我的

范围继承通常很简单，而且您通常甚至不需要知道它正在发生...直到您尝试将2 路数据绑定（即表单元素、ng-model）到一个基元（例如，数字、字符串、 boolean) 从子作用域内定义在父作用域上。它不像大多数人期望的那样工作。发生的情况是子作用域获得了自己的属性，该属性隐藏/隐藏了同名的父属性。这不是 AngularJS 正在做的事情——这就是 JavaScript 原型继承的工作方式。新的 AngularJS 开发人员通常没有意识到 ng-repeat、ng-switch、ng-view、ng-include 和 ng-if 都会创建新的子作用域，因此当涉及到这些指令时，问题通常会出现。（见这个例子快速说明问题。）

通过遵循始终使用“.”的“最佳实践”，可以轻松避免原语的这个问题。在您的 ng 模型中- 观看 3 分钟。Misko 演示了 ng-switch 的原始绑定问题。

上面链接的plunker直接显示了您的问题（来源如下）：

javascript:

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

app.controller('MainCtrl', function($scope) {
  
  /*
  ng-repeat generates new scopes which will be child scopes of the scope within
  which they are generated. In other words, this scope is the parent scope for
  the child scopes generated by the ng-repeat in this example. Child scopes
  inherit things from their parent's scope.
  */

  // The initial main image 
  var initialImg = "http://3.bp.blogspot.com/-z8kzafZYkfQ/UERf6IbjJJI/AAAAAAAAALE/qaAxqqawXpM/s1600/Cat+Pictures+1.jpg";
  
  /*
  A primitive holding the URL for the main image
  
  This scope's child scopes will "shadow" this primitive, which basically means
  they'll get their own copy that is initialy the same value. The child scopes
  can only see their own copy though, so modifying the value in the child scope
  does not affect the value in the parent scope.
  */
  $scope.mainImgUrl = initialImg;
  
  /*
  An object holding the URL for the main image
  
  This scope's child scopes will NOT get their own copy of this object.
  Referencing main or main.imgUrl in the child scope will reference this object
  on this scope (unless the child scope explicitly define its own "mainImg" object.)
  */
  $scope.mainImg = { url: initialImg };
  
  // Our 'thumbnail' images
  $scope.images = [
      "http://happy.fm/wp-content/uploads/2011/10/random-owl.jpg",
      "http://www.superhumor.com/emoticonos/8761.gif"
  ];
  
});

html:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <h1>ng-click inside ng-repeat setting value on parent scope</h1>
    
    <p>
    Example to illustrate the nuances of prototypical inheritance. See 
    <a href="http://docs.angularjs.org/tutorial/step_10#comment-977962885">this Angular Tutorial Step 10 question</a>
    and
    <a href="https://github.com/angular/angular.js/wiki/Understanding-Scopes">Understanding Scopes</a>
    .
    </p>
    
    
    <h3>Using primitive:</h3>
      
    <div class="example">
    
      <img class="mainImg" ng-src="{{mainImgUrl}}" />
      
      <p>This is the parent scope with the main image.</p>
      
      <p>$scope.mainImgUrl == {{mainImgUrl}}</p>
  
      <div class="thumbs">
      
        <p>Thumbs generated with ng-repeat, with ng-click setting <strong>$scope.mainImgUrl</strong> (click on them to see what happens):</p>
        
        <div class="thumbDiv" ng-repeat="img in images">
        
          <img class="thumb" ng-src="{{img}}" ng-click="mainImgUrl = img" />

          <p>This is a child scope generated by ng-repeat.</p>
          
          <p>$scope.mainImgUrl == {{mainImgUrl}}</p>
          
        </div>
        
      </div>
      
    </div>
    
    
    <h3>Using object:</h3>
    
    <div class="example">
      
      <img class="mainImg" ng-src="{{mainImg.url}}" />
      
      <p>This is the parent scope with the main image.</p>
      
      <p>$scope.mainImg.url == {{mainImg.url}}</p>
  
      <div class="thumbs">
      
        <p>Thumbs generated with ng-repeat, with ng-click setting <strong>$scope.mainImg.url</strong> (click on them to see what happens):</p>
        
        <div class="thumbDiv" ng-repeat="img in images">
        
          <img class="thumb" ng-src="{{img}}" ng-click="mainImg.url = img" />
          
          <p>This is a child scope generated by ng-repeat.</p>
          
          <p>$scope.mainImg.url == {{mainImg.url}}</p>
          
        </div>
        
      </div>
      
    </div>
    
  </body>

</html>

推荐阅读