从这篇SO帖子中汲取灵感，我在这个笨拙的人中有一个可行的解决方案。
我不得不改变很多。我还选择了一个独立的作用域，
editableString因为将正确的值绑定到模板更容易。否则，您将不得不使用
compile或其他方法（例如
$transclude服务）。
结果如下：
JS：
var myApp = angular.module('myApp', []);myApp.controller('Ctrl', function($scope) { $scope.myModel = { property1: 'hello1', property2: 'hello2' }});myApp.directive('editableFieldset', function () { return { restrict: 'E', scope: { model: '=' }, transclude: true, replace: true, template: '<div ng-click="edit()"><div ng-transclude></div></div>', link: function(scope, element) { scope.edit = function() { scope.editing = true; } }, controller: ['$scope', function($scope) { this.getModel = function() { return $scope.model; } }] };});myApp.directive('editableString', function () { return { restrict: 'E', replace: true, scope: { label: '@', field: '@' }, template: '<div><label>{{ label }}</label><p>{{ model[field] }}</p></div>', require: '^editableFieldset', link: function(scope, element, attrs, ctrl) { scope.model = ctrl.getModel(); } };});HTML：
<body ng-controller="Ctrl"> <h1>Hello Plunker!</h1> <editable-fieldset model="myModel"> <editable-string label="Some Property1:" field="property1"></editable-string> <editable-string label="Some Property2:" field="property2"></editable-string> </editable-fieldset> </body>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）