Question

我正在使用一个指令，并且从双向绑定我正在更改最初传递给指令的日期对象变量。

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

$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 link

Answer 1

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

强调我的

范围继承通常很简单，你甚至不需要知道它正在发生......直到你尝试双向数据绑定（即表单元素，ng-模型）在父范围内从子范围内定义的基元（例如，数字，字符串，布尔值）。它没有像大多数人期望的那样工作。会发生什么是子范围获取其自己的属性，该属性隐藏/隐藏同名的父属性。这不是AngularJS正在做的事情 - 这就是JavaScript原型继承的工作原理。新的AngularJS开发人员通常没有意识到ng-repeat，ng-switch，ng-view，ng-include和ng-if都创建了新的子范围，所以当涉及这些指令时，问题经常会出现。（有关问题的快速说明，请参阅this example。）

通过遵循＆＃34;最佳实践＆＃34;可以很容易地避免使用原语这个问题。 always have a '.' in your ng-models - 观看3分钟。 Misko用ng-switch演示了原始绑定问题。

plunker linked to above above直接显示您的问题（来源如下）：

的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>

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

1 个答案: