双向绑定Angularjs指令不工作 [英] Two way binding Angularjs directives isn't working
问题描述
我一直在试图找出解决办法，但我觉得我打了一个死胡同。
因此，这里是我的指令
directives.directive（'后处理'，函数（$编译）
{
返回{
限制：'E'，
要求：'^ ngModel'，
范围： {
ngModel：'='
}，
链接：功能（范围，元素，ATTRS）{
VAR分析= scope.ngModel;
EL = $编译（解析）（范围）;
element.html（）;
//添加一些其他的HTML实体/样式。
element.append（EL）;
的console.log（解析）;
}
};
}）;
HTML的
＆LT;后处理NG模型=some_model.its_property的风格=填充顶：10px的; /＆GT;
在某处控制器，我更新模型属性
some_model.its_property ='呼啦';
不过，这并不更新相应指令。它完美的作品时加载它告诉我，它可能不是完全是一个作用域的问题。
这是简单得多，所以我删除了一些额外的code你必须在那里。
请看看在code以下或工作 Plunker ：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENNG-应用=对myApp＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT;文件＆LT; /标题＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js＆GT;＆下; /脚本＆GT; ＆LT;脚本＆GT;
VAR对myApp = angular.module（'对myApp'，[]）;
myApp.directive（'后处理'，函数（$超时）{
返回{
限制：'E'，
transclude：真，
范围： {
MYVARIABLE：'='
}，
链接：功能（范围，元素，ATTRS）{
$超时（函数（）{
scope.myVariable ='再见！
}，200）;
}
};
}）; myApp.controller（'myAppCtrl'，['$范围，$超时'，函数（$范围，$超时）{
$ scope.myVariable = {
值：'呼啦'
}; 的console.log（$ scope.myVariable.value）; // - ＆GT;打印初始值
$超时（函数（）{
的console.log（$ scope.myVariable.value）; // - ＆GT;它是由该指令变更后打印值
}，2000）;
}]）
＆LT; / SCRIPT＆GT; ＆LT; /头＆GT;
＆LT;机身NG控制器=myAppCtrl＆GT;
＆LT;后处理我的变量=myVariable.value的风格=填充顶：10px的; /＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
- 控制器的初始值设置为'呼啦'
- 该指令接收由
我的变量属性该值 - 使用双向数据绑定到
scope.myVariable所做的任何更改将更新的$ scope.myVariable主控制器 - 几秒钟后
$ scope.myVariable更改为'再见' - 在您的console.log看看
$钟表$适用
角的双向数据绑定在角所有真棒的根源。然而，这不是魔术，而且有一些你需要给它一个轻推在正确的方向的情况。
当您使用NG-模式，NG-重复等值绑定到角元素，角上创建了一个价值$手表。那么只要在一个范围的变化值，所有的手表$观察到的元素被执行，一切都更新。
有时，通常当你写一个自定义的指令，你必须确定一个范围值，你自己的手表$使指令反应变化。
在另一面，有时候你改变一些code一个范围值，但应用程序不对其做出反应。您code片范围后，变量的变化角度的检查已经完成运行;例如，NG-点击呼叫时，您范围功能，角将检查的变化和反应。然而，一些code是角之外，你必须调用范围。$适用（）自己触发更新。这是最常见的事件处理程序的定制指令。
I have been trying to figure out the solution but I think i hit a dead end.
So here is my directive
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); } }; });The 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.
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>
- The controller sets the initial value to 'Holla'
- The directive receives that value by the
my-variableattribute- Using two way data-binding the 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 and $apply
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.
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.
Sometimes, usually when you're writing a custom directive, you will have to define your own $watch on a scope value to make the directive react to changes.
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屋！
