AngularJS – 创build一个使用ng-model的指令
我试图创build一个指令，将创build一个input字段与创build指令的元素相同的ng模型。
这是我到目前为止所做的：
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目标字段的值进行初始化。
这是上面的代码的Plunker： http ://plnkr.co/edit/IvrDbJ
处理这个问题的正确方法是什么？
编辑 ：从模板中删除ng-model="value"后，这似乎工作正常。 不过，我会保持这个问题的开放，因为我想仔细检查这是做这个的正确方法。
这实际上是非常好的逻辑，但是你可以简化一些东西。
指示
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); } }; });
Html与指令
<body ng-controller="MainCtrl"> This scope value <input ng-model="name"> <my-directive my-directive-var="name"></my-directive> </body>
CSS
.some { border: 1px solid #cacaca; padding: 10px; }
你可以看到它与这个Plunker的行动。
以下是我所看到的：
- 我明白你为什么要使用'ng-model'，但在你的情况下，这是没有必要的。 ng-model是将现有的 html元素与作用域中的一个值相关联。 既然你自己创build了一个指令，你正在创build一个“新”html元素，所以你不需要ng-model。
编辑正如Mark在他的评论中提到的那样，没有理由不能使用ng-model，只是为了保持约定。
- 通过在你的指令中明确地创build一个范围（一个“隔离的”范围），指令的作用域不能访问父范围的'name'variables（这就是为什么我想用ng-model）。
- 我从你的指令中删除了ngModel，并用一个自定义的名称replace它，你可以改变它。
- 使所有工作仍然有效的是'='login范围。 签出“范围”标题下的文档文档 。
一般来说，如果您希望指令中的值总是映射到父范围中的某个值，则您的指令应该使用隔离的范围（正确执行）并使用“=”types范围。
我采取了所有答案的组合，现在有两种使用ng-model属性的方法：
- 用一个新的范围复制ngModel
- 与链接上编译的范围相同
var app = angular.module('model', []); app.controller('MainCtrl', function($scope) { $scope.name = "Felipe"; $scope.label = "The Label"; }); app.directive('myDirectiveWithScope', function() { return { restrict: 'E', scope: { ngModel: '=', }, // Notice how label isn't copied template: '<div class="some"><label>{{label}}: <input ng-model="ngModel"></label></div>', replace: true }; }); app.directive('myDirectiveWithChildScope', function($compile) { return { restrict: 'E', scope: true, // Notice how label is visible in the scope template: '<div class="some"><label>{{label}}: <input></label></div>', replace: true, link: function ($scope, element) { // element will be the div which gets the ng-model on the original directive var model = element.attr('ng-model'); $('input',element).attr('ng-model', model); return $compile(element)($scope); } }; }); app.directive('myDirectiveWithoutScope', function($compile) { return { restrict: 'E', template: '<div class="some"><label>{{$parent.label}}: <input></label></div>', replace: true, link: function ($scope, element) { // element will be the div which gets the ng-model on the original directive var model = element.attr('ng-model'); return $compile($('input',element).attr('ng-model', model))($scope); } }; }); app.directive('myReplacedDirectiveIsolate', function($compile) { return { restrict: 'E', scope: {}, template: '<input class="some">', replace: true }; }); app.directive('myReplacedDirectiveChild', function($compile) { return { restrict: 'E', scope: true, template: '<input class="some">', replace: true }; }); app.directive('myReplacedDirective', function($compile) { return { restrict: 'E', template: '<input class="some">', replace: true }; });
.some { border: 1px solid #cacaca; padding: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <div ng-app="model" ng-controller="MainCtrl"> This scope value <input ng-model="name">, label: "{{label}}" <ul> <li>With new isolate scope (label from parent): <my-directive-with-scope ng-model="name"></my-directive-with-scope> </li> <li>With new child scope: <my-directive-with-child-scope ng-model="name"></my-directive-with-child-scope> </li> <li>Same scope: <my-directive-without-scope ng-model="name"></my-directive-without-scope> </li> <li>Replaced element, isolate scope: <my-replaced-directive-isolate ng-model="name"></my-replaced-directive-isolate> </li> <li>Replaced element, child scope: <my-replaced-directive-child ng-model="name"></my-replaced-directive-child> </li> <li>Replaced element, same scope: <my-replaced-directive ng-model="name"></my-replaced-directive> </li> </ul> <p>Try typing in the child scope ones, they copy the value into the child scope which breaks the link with the parent scope. <p>Also notice how removing jQuery makes it so only the new-isolate-scope version works. <p>Finally, note that the replace+isolate scope only works in AngularJS >=1.2.0 </div>
它并不复杂：在你的dirctive中，使用一个别名： scope:{alias:'=ngModel'}
.directive('dateselect', function () { return { restrict: 'E', transclude: true, scope:{ bindModel:'=ngModel' }, template:'<input ng-model="bindModel"/>' }
在你的HTML，正常使用
<dateselect ng-model="birthday"></dateselect>
当你需要访问模型的$ viewValue或者$ modelValue时，你只需要ng-model。 请参阅NgModelController 。 在这种情况下，您可以使用require: '^ngModel' 。
其余的，请参阅罗伊斯的回答 。
这是一个有点迟到的答案，但我发现这个关于NgModelController真棒post ，我认为这正是你在哪里寻找。
TL; DR – 你可以使用require: 'ngModel'然后添加NgModelController到你的链接函数中：
link: function(scope, iElement, iAttrs, ngModelCtrl) { //TODO }
这样，就不需要黑客 – 你正在使用Angular的内置ng-model
我不会通过属性设置ngmodel，你可以在模板中指定它：
template: '<div class="some"><label>{{label}}</label><input data-ng-model="ngModel"></div>',
plunker ： http : //plnkr.co/edit/9vtmnw?p=preview
由于Angular 1.5可以使用组件。 组件是要走的路，容易解决这个问题。
<myComponent data-ng-model="$ctrl.result"></myComponent> app.component("myComponent", { templateUrl: "yourTemplate.html", controller: YourController, bindings: { ngModel: "=" } });
在YourController里面，你需要做的是：
this.ngModel = "x"; //$scope.$apply("$ctrl.ngModel"); if needed
创build一个隔离范围是不可取的。 我会避免使用范围属性，并做这样的事情。 范围：真正给你一个新的子范围，但不隔离。 然后使用parse将本地范围variables指向用户提供给ngModel属性的相同对象。
app.directive('myDir', ['$parse', function ($parse) { return { restrict: 'EA', scope: true, link: function (scope, elem, attrs) { if(!attrs.ngModel) {return;} var model = $parse(attrs.ngModel); scope.model = model(scope); } }; }]);
