编辑 :这个答案是旧的,可能已经过时。只需抬起头,这样就不会使人们误入歧途。我不再使用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 >' + '<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元素与范围中的值链接。由于您自己创建指令,因此要创建“新” html元素,因此不需要ng-model。
编辑 正如Mark在评论中提到的那样,没有理由您 不能 使用ng-model,只是为了遵守约定。
- 通过在指令中显式创建一个作用域(“隔离”作用域),该指令的作用域无法访问父作用域上的“ name”变量(这就是我想使用ng-model的原因)。
- 我从指令中删除了ngModel,并将其替换为可以更改为任何名称的自定义名称。
- 使一切仍然起作用的是在范围内使用’=’。在“ scope”标题下签出docs docs。
通常,如果您希望指令中的值始终映射到父级作用域中的值,则您的指令应使用隔离的作用域(正确执行)并使用’=’类型作用域。



