这不应该是太难的事情,但我不知道如何最好地做到这一点.
我有一个父指令,就像这样：
directive('editableFieldset',function () {
return {
restrict: 'E',scope: {
model: '='
},replace: true,transclude: true,template: '
<div class="editable-fieldset" ng-click="edit()">
<div ng-transclude></div>
...
</div>',controller: ['$scope',function ($scope) {
$scope.edit = ->
$scope.editing = true
// ...
]
};
});
和一个孩子指令：
.directive('editableString',template: function (element,attrs) {
'<div>
<label>' + attrs.label + '</label>
<p>{{ model.' + attrs.field + ' }}</p>
...
</div>'
},require: '^editableFieldset'
};
});
如何从子指令中轻松访问模型并编辑父指令的属性？在我的链接函数中,我可以访问父范围 – 应该使用$watch来监视这些属性吗？
放在一起,我想要的是：
<editable-fieldset model="myModel"> <editable-string label="Some Property" field="property"></editable-string> <editable-string label="Some Property" field="property"></editable-string> </editable-fieldset>
这个想法是默认显示一组字段.如果点击,它们就成为输入,可以编辑.
从
this SO post开始,我有一个工作解决方案
here in this plunker.
我不得不改变一点点.我选择在editableString上有一个孤立的范围,因为它更容易绑定到模板的正确的值.否则,您将不得不使用编译或其他方法(如$transclude服务).
结果如下：
JS：
var myApp = angular.module('myApp',[]);
myApp.controller('Ctrl',function($scope) {
$scope.myModel = { property1: 'hello1',property2: 'hello2' }
});
myApp.directive('editableFieldset',template: '<div class="editable-fieldset" ng-click="edit()"><div ng-transclude></div></div>',link: function(scope,element) {
scope.edit = function() {
scope.editing = true;
}
},function($scope) {
this.getModel = function() {
return $scope.model;
}
}]
};
});
myApp.directive('editableString',scope: {
label: '@',field: '@'
},template: '<div><label>{{ label }}</label><p>{{ model[field] }}</p></div>',require: '^editableFieldset',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>
