[英]Two way data binding in AngularJS Directives
I have been trying to define directives so I can display different "widgets" in a form, depending on the type of field and its parameters, which are stored in a database. 我一直在尝试定义指令,因此我可以在表单中显示不同的“小部件”,具体取决于存储在数据库中的字段类型及其参数。 I need to react to different types of scenarios, hence the need for directives to handle layout. 我需要对不同类型的场景做出反应,因此需要指令来处理布局。
While playing with a few examples, I came up with a code that *kinda* works: 在玩几个例子时,我想出了一个*有点*的代码:
<input type="text" ng-model="myModel" style="width: 90%"/>
<div class="zippy" zippy-title="myModel"></div>
myApp.directive('zippy', function(){
return {
restrict: 'C',
// This HTML will replace the zippy directive.
transclude: true,
scope: { title:'=zippyTitle' },
template: '<input type="text" value="{{title}}"style="width: 90%"/>',
// The linking function will add behavior to the template
link: function(scope, element, attrs) {
// Title element
element.bind('blur keyup change', function() {
scope.$apply(read);
});
var input = element.children();
function read() {
scope.title = input.val();
}
}
}
});
This seems to works (albeit noticeably slower than a *proper* angularJS variable binding) but I figure there must be a better way to do this. 这似乎有效(虽然明显慢于*适当的* angularJS变量绑定)但我认为必须有更好的方法来做到这一点。 Can anyone shed some light on the matter? 谁能解释一下这个问题呢?
I don't know why you are triggering the $apply
method manually because you actually don't need it. 我不知道为什么你手动触发$apply
方法,因为你实际上并不需要它。
I edited the example you used from the Angular page and included the input. 我编辑了您从Angular页面使用的示例并包含了输入。 It works for me: http://jsfiddle.net/6HcGS/2/ 它对我有用 : http : //jsfiddle.net/6HcGS/2/
HTML HTML
<div ng-app="zippyModule">
<div ng-controller="Ctrl3">
Title: <input ng-model="title">
<hr>
<div class="zippy" zippy-title="title"></div>
</div>
</div>
JS JS
function Ctrl3($scope) {
$scope.title = 'Lorem Ipsum';
}
angular.module('zippyModule', [])
.directive('zippy', function(){
return {
restrict: 'C',
replace: true,
transclude: true,
scope: { title:'=zippyTitle' },
template: '<input type="text" value="{{title}}"style="width: 90%"/>',
link: function(scope, element, attrs) {
// Your controller
}
}
});
UPDATE maxisam is right, you have to use ng-model
instead of binding the variable against the value like so: 更新 maxisam是对的,您必须使用ng-model
而不是将变量绑定到值,如下所示:
<input type="text" ng-model="title" style="width: 90%"/>
Here is the working version: http://jsfiddle.net/6HcGS/3/ 这是工作版本: http : //jsfiddle.net/6HcGS/3/
You mean something like this ? 你的意思是像这样 ?
I basically use @Flek's example. 我基本上使用@Flek的例子。
The only difference being ng-model='title'
唯一的区别是ng-model='title'
The trick to doing two-way binding is ng-model, and it states in the document : 进行双向绑定的技巧是ng-model,它在文档中说明 :
ngModel is directive that tells Angular to do two-way data binding. ngModel是指示Angular执行双向数据绑定的指令。 It works together with input, select, textarea. 它与input,select,textarea一起使用。 You can easily write your own directives to use ngModel as well. 您也可以轻松编写自己的指令以使用ngModel。
<input type="text" ng-model="title" style="width: 90%"/>
Here's a way to pass to a callback parameter in a directive. 这是一种传递给指令中的回调参数的方法。 The controller template: 控制器模板:
<component-paging-select-directive
page-item-limit="{{pageItemLimit}}"
page-change-handler="pageChangeHandler(paramPulledOutOffThinAir)"
></component-paging-select-directive>
The directive: 指令:
angular.module('component')
.directive('componentPagingSelectDirective', [
function( ) {
return {
restrict: 'E',
scope: {
// using the '=' for two way doesn't work
pageItemLimit: '@', // the '@' is one way from controller
pageChangeHandler: '&'
},
controller: function($scope) {
// pass value from this scope to controller method.
// controller method will update the var in controller scope
$scope.pageChangeHandler({
paramPulledOutOffThinAir: $scope.pageItemLimit
})
}, ...
In the controller: 在控制器中:
angular.module('...').controller(...
$scope.pageItemLimit = 0; // initial value for controller scoped var
// complete the data update by setting the var in controller scope
// to the one from the directive
$scope.pageChangeHandler = function(paramPulledOutOffThinAir) {
$scope.pageItemLimit = paramPulledOutOffThinAir;
}
Note the difference in function parameters for the directive (an object with parameter as keys), template ('unwrapped' keys from the parameter object in directive), and controller definition. 注意指令的函数参数(带参数作为键的对象),模板(指令中参数对象的'解包'键)和控制器定义的区别。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.