更新时间:2023-02-27 07:47:44
它更简单,所以我删除了你在那里的一些额外代码.
It's much simpler, so I have removed some extra code you had there.
请查看下面的代码或使用 Plunker:
Please take a look at the code below or working Plunker:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.directive('postprocess', function ($timeout) {
return {
restrict : 'E',
transclude: 'true',
scope: {
myVariable: '='
},
link: function(scope, element, attrs) {
$timeout(function () {
scope.myVariable = 'Bye bye!'
}, 200);
}
};
});
myApp.controller('myAppCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
$scope.myVariable = {
value : 'Holla'
};
console.log($scope.myVariable.value); // -> prints initial value
$timeout(function () {
console.log($scope.myVariable.value); // -> prints value after it is changed by the directive
}, 2000);
}])
</script>
</head>
<body ng-controller="myAppCtrl">
<postprocess my-variable="myVariable.value" style="padding-top: 10px;" />
</body>
</html>
my-variable
属性接收该值scope.myVariable
所做的任何更改都会更新主控制器的 $scope.myVariable
$scope.myVariable
更改为 'Bye Bye'my-variable
attributescope.myVariable
updates the $scope.myVariable
of the main controller$scope.myVariable
changes to 'Bye Bye'$watch 和 $apply
Angular 的双向数据绑定是 Angular 中所有 awesome 的根源.然而,这并不神奇,在某些情况下,您需要将其推向正确的方向.
Angular's two-way data binding is the root of all awesome in Angular. However, it's not magic, and there are some situations where you need to give it a nudge in the right direction.
当您使用 ng-model、ng-repeat 等将值绑定到 Angular 中的元素时,Angular 会在该值上创建一个 $watch.然后,每当作用域上的值发生变化时,所有观察该元素的 $watches 都会被执行,并且所有内容都会更新.
When you bind a value to an element in Angular using ng-model, ng-repeat, etc., Angular creates a $watch on that value. Then whenever a value on a scope changes, all $watches observing that element are executed, and everything updates.
有时,通常在您编写自定义指令时,您必须在范围值上定义自己的 $watch 以使指令对更改做出反应.
另一方面,有时您在某些代码中更改了范围值,但应用程序不会对其做出反应.在您的代码片段运行完毕后,Angular 检查范围变量的变化;例如,当 ng-click 调用作用域上的函数时,Angular 将检查更改并做出反应.但是,有些代码在 Angular 之外,您必须自己调用 scope.$apply() 来触发更新.这在自定义指令中的事件处理程序中最常见.
On the flip side, sometimes you change a scope value in some code but the app doesn't react to it. Angular checks for scope variable changes after pieces of your code have finished running; for example, when ng-click calls a function on your scope, Angular will check for changes and react. However, some code is outside of Angular and you'll have to call scope.$apply() yourself to trigger the update. This is most commonly seen in event handlers in custom directives.