两种方式绑定 Angularjs 指令不起作用 [英] Two way binding Angularjs directives isn't working
问题描述
我一直试图找出解决方案，但我认为我陷入了死胡同.
I have been trying to figure out the solution but I think i hit a dead end.
这是我的指令
directives.directive('postprocess', function($compile)
{
return {
restrict : 'E',
require: '^ngModel',
scope: {
ngModel: '='
},
link: function(scope, element, attrs) {
var parsed = scope.ngModel;
el = $compile(parsed)(scope);
element.html("");
//add some other html entities/styles.
element.append(el);
console.log(parsed);
}
};
});
HTML
<postprocess ng-model="some_model.its_property" style="padding-top: 10px;" />
在控制器的某个地方，我更新了模型属性
Somewhere in the controller, I update the model property
some_model.its_property = 'Holla';
但它不会更新相应的指令.它在加载时运行良好，这告诉我这可能不完全是范围问题.
But it doesn't update the corresponding directive. It works perfectly when loading which tells me that it might not be entirely a scoping issue.
推荐答案
它更简单，所以我删除了你在那里的一些额外代码.
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>
- 控制器将初始值设置为Holla"
- 该指令通过
my-variable属性接收该值 - 使用双向数据绑定对
scope.myVariable所做的任何更改都会更新主控制器的$scope.myVariable - 几秒钟后
$scope.myVariable更改为 'Bye Bye' - 查看您的 console.log
- The controller sets the initial value to 'Holla'
- The directive receives that value by the
my-variableattribute - Using two way data-binding any changes made to
scope.myVariableupdates the$scope.myVariableof the main controller - After few seconds
$scope.myVariablechanges to 'Bye Bye' - Take a look at your console.log
$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.
这篇关于两种方式绑定 Angularjs 指令不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
