我正在使用指令，并且通过两种方式绑定(bind)，我正在更改最初传递给指令的日期对象变量。
但是当我对日期变量进行一些更改时，例如
$scope.valueee = 1;
$scope.press = function(){
$scope.searchterm.setHours($scope.valueee++, 0, 0, 0);
if(!$scope.$$phase)$scope.$apply()
}
但它不会使用指令内模板 View 中的 ng-model 更新 View
'ng-model="term"'
下面是代码示例
最佳答案
我认为您在直接绑定(bind)到原语时遇到了这个问题: https://github.com/angular/angular.js/wiki/Understanding-Scopes
强调我的
Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope. It doesn't work the way most people expect it should work. What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works. New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view, ng-include and ng-if all create new child scopes, so the problem often shows up when these directives are involved. (See this example for a quick illustration of the problem.)
This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models – watch 3 minutes worth. Misko demonstrates the primitive binding issue with 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="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c6c9c0d2cbc6d589cdd4e796899789df" rel="noreferrer noopener nofollow">[email protected]</a>" 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>
关于angularjs - 当 Controller 更改值时，为什么指令模板中的 ng-model 不更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50473075/