我正在尝试创建一个指令,该指令将创建与创建指令的元素具有相同ng-model的输入字段。
到目前为止,这是我想到的:
的HTML
<!doctype html> <html ng-app="plunker" > <head> <meta charset="utf-8"> <title>AngularJS Plunker</title> <link rel="stylesheet" href="style.css"> <script>document.write("<base href=\"" + document.location + "\" />");</script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> This scope value <input ng-model="name"> <my-directive ng-model="name"></my-directive> </body> </html>
的JavaScript
var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.name = "Felipe"; }); app.directive('myDirective', function($compile) { return { restrict: 'E', scope: { ngModel: '=' }, template: '<div class="some"><label for="{{id}}">{{label}}</label>' + '<input id="{{id}}" ng-model="value"></div>', replace: true, require: 'ngModel', link: function($scope, elem, attr, ctrl) { $scope.label = attr.ngModel; $scope.id = attr.ngModel; console.debug(attr.ngModel); console.debug($scope.$parent.$eval(attr.ngModel)); var textField = $('input', elem). attr('ng-model', attr.ngModel). val($scope.$parent.$eval(attr.ngModel)); $compile(textField)($scope.$parent); } }; });
但是,我不确定这是处理这种情况的正确方法,并且存在一个错误,即我的控件未使用ng-model target字段的值初始化。
这是上面代码的简称:http ://plnkr.co/edit/IvrDbJ
处理此问题的正确方法是什么?
编辑 :ng-model="value"从模板中删除后,这似乎工作正常。但是,我将继续公开这个问题,因为我想再次确认这是正确的方法。
ng-model="value"
编辑 :这个答案是旧的,可能已经过时。只需抬起头,这样就不会使人们误入歧途。我不再使用Angular,因此无法进行改进。
这实际上是相当不错的逻辑,但是您可以稍微简化一下。
var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.model = { name: 'World' }; $scope.name = "Felipe"; }); app.directive('myDirective', function($compile) { return { restrict: 'AE', //attribute or element scope: { myDirectiveVar: '=', //bindAttr: '=' }, template: '<div class="some">' + '<input ng-model="myDirectiveVar"></div>', replace: true, //require: 'ngModel', link: function($scope, elem, attr, ctrl) { console.debug($scope); //var textField = $('input', elem).attr('ng-model', 'myDirectiveVar'); // $compile(textField)($scope.$parent); } }; });
<body ng-controller="MainCtrl"> This scope value <input ng-model="name"> <my-directive my-directive-var="name"></my-directive> </body>
.some { border: 1px solid #cacaca; padding: 10px; }
您可以在此Plunker上看到它的实际效果。
这是我看到的:
编辑 正如Mark在评论中提到的那样,没有理由您 不能 使用ng-model,只是为了遵守约定。
通常,如果您希望指令中的值始终映射到父级作用域中的值,则您的指令应使用隔离的作用域(正确执行)并使用’=’类型作用域。