ng-model无约束的angular指令

Question

我创建了一个名为<form-field>非常简单的指令，我正在尝试将ng-model绑定到该指令。 我已经将示例分解为最简单的用例，

我已经包含了控制器，以及带有HTML的指令。 我已经看到了许多require:ngModel的示例require:ngModel ，然后在link:内部执行了操作link:但所有这些示例仅适用于dom操作，或者例如不保存值的增量

 angular.module('taskApp', []) .controller('taskController', function($scope) { $scope.taskData = {}; $scope.save = function(taskData) { $scope.taskData = angular.copy(taskData); }; }) .directive('formField', function($timeout) { var template = '<div class="form-group" ng-switch="element">' + '<input ng-switch-when="input" ng-model="ngModel" name="{{field}}">' + '<textarea ng-switch-when="textarea" ng-model="ngModel" name="{{field}}"></textarea>' + '</div>'; return { restrict: 'EA', template: template, replace: true, scope: { ngModel: '=', field: '@', live: '@', element: '@' }, link: function($scope, element, attr) { } }; });

 <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.23/angular.min.js"></script> <body ng-app="taskApp" ng-controller="taskController"> <form name='taskForm' novalidate> <form-field element='input' live='false' field="title" ng-model="taskData.title"></form-field> <form-field element='textarea' live='false' field="notes" ng-model="taskData.notes"></form-field> <button type="submit" ng-click="save(taskData)">save</button> </form> <br/> <pre>{{taskData | json}}</pre> </body>

Answer 1

指令中的ngModel仍然引用内部隔离范围。 您可以使用$parent.ngModel来访问外部模型。

var template = '<div class="form-group" ng-switch="element">' +
  '<input ng-switch-when="input" ng-model="$parent.ngModel" name="{{field}}">' +
  '<textarea ng-switch-when="textarea" ng-model="$parent.ngModel" name="{{field}}"></textarea>' +
  '</div>';

ng-model无约束的angular指令

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-09-23 14:59:24

ng-model无约束的angular指令

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-09-23 14:59:24

解决方案1
3 已采纳 2015-09-23 14:59:24