带有ngModel绑定的AngularJS自定义指令不起作用
[英]AngularJS custom directive with ngModel binding not working
问题描述
I'm trying to create a custom directive for displaying a formatted address. 
我正在尝试创建用于显示格式化地址的自定义指令。 I've written the following code to use the new directive, but it doesn't work. 我已经编写了以下代码来使用new指令，但是它不起作用。 My account controller (not shown) works fine, and the billingAddress.Line1 is shown correctly. 我的帐户控制器（未显示）工作正常，并且billingAddress.Line1正确显示。 However, my address directive does not render anything. 但是，我的address指令不呈现任何内容。
I've included the directive code with my html, although I expect to move it to a separate .js file for reuse. 尽管我希望将指令代码移到单独的.js文件中以供重用，但我已将指令代码包含在html中。 Could someone explain what I've done wrong? 有人可以解释我做错了什么吗？
<!DOCTYPE html> <html ng-app="myApp"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <script type="text/javascript" src="ng-address.js"></script> <script type="text/javascript" src="app.js"></script> <script type="text/javascript"> (function() { var app = angular.module('ng-directives', []); app.directive("ngAddress", function() { return { restrict: 'E', scope: { address: '=ngModel' }, template: "<div>{{address.Line1}}</br><span>{{address.Line1}}</br></span>{{address.city}}, {{address.state}} {{address.postCode}}</div>" }; }); })(); </script> </head> <body class="container" ng-controller="AccountController as account"> <div>{{account.model.billingAddress.line1}}</div> <ng-address ng-model="account.model.billingAddress"></ng-address> </body> </html>
1 个解决方案
解决方案1
0 2014-11-27 21:39:11
To get started, the example was incomplete. 首先，示例不完整。
- I changed the angular module to
myApp我将角度模块更改为myApp - I added a controller
AccountController我添加了一个控制器AccountController - using
asin ng-controller didn't work.在ng-controller中使用as无效。 I'm not sure whether this should work, but I never use it.我不确定这是否行得通，但我从未使用过。
The major problem in the directive was the bad use of ng-model . 该指令中的主要问题是ng-model的错误使用。 You should pass it to require , not to the scope. 您应该将其传递给require ，而不是传递给范围。 It is then passed to the link function, where the $render function is implemented. 然后将其传递给link函数，在其中实现$render函数。
You will probably also want to push a function to $viewChangeListeners . 您可能还希望将函数推送到$viewChangeListeners 。
For more details, see the documentation . 有关更多详细信息，请参见文档 。
Lastly the template contained </br> , which is invalid. 最后，模板包含</br> ，该模板无效。
<!DOCTYPE html> <html ng-app="myApp"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <script type="text/javascript"> (function() { var app = angular.module('myApp', []); app.controller('AccountController', function($scope) { $scope.model = { billingAddress: { line1: 'somewhere far far away', city: 'Dark side of the moon', state: 'Top secret', postCode: '1337XD' } }; }); app.directive("ngAddress", function() { return { restrict: 'E', require: '?ngModel', template: "<div>{{address.line1}}<br><span>{{address.line1}}<br></span>{{address.city}}, {{address.state}} {{address.postCode}}</div>", link: function(scope, element, attrs, ngModel) { ngModel.$render = function() { scope.address = ngModel.$modelValue; }; } }; }); })(); </script> </head> <body class="container" ng-controller="AccountController"> <input class="form-control" ng-model="model.billingAddress.line1"/> <input class="form-control" ng-model="model.billingAddress.city"/> <input class="form-control" ng-model="model.billingAddress.state"/> <input class="form-control" ng-model="model.billingAddress.postCode"/> <ng-address ng-model="model.billingAddress"></ng-address> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.