我有一个自定义指令，其目的是显示一个小部件并将其绑定到变量。每个变量具有不同的数据类型，因此将根据数据类型显示不同的窗口小部件。
我的问题是我可以传递变量的数据，但无法设法将小部件绑定到它。
为了简化问题，我的小部件只是一个简单的文本输入。当我尝试$ compile小部件时，Angular使用变量的值而不是绑定到它。
HTML：
<body ng-app="app" ng-controller="myCtrl">
<input type="text" ng-model="resource.name"></div>
<div custom-widget widget-type="widget" bind-to="resource"></div>
</body>
Javascript：
angular.module('app', [])
.directive('customWidget', function($compile) {
return {
replace: true,
template: '<div></div>',
controller: function($scope) {
},
scope: {
bindTo: "=bindTo",
widgetType: "=widgetType"
},
link: function(scope, iElem, iAttrs) {
var html = '<div>' + scope.widgetType.label + ':<input ng-bind="' + scope.bindTo[scope.widgetType.id] + '" /></div>';
iElem.replaceWith($compile(html)(scope));
}
};
})
.controller('myCtrl', function($scope) {
$scope.widget = {
id: 'name',
label: 'Text input',
type: 'text'
};
$scope.resource = {
name: 'John'
};
});
Plunker演示：http ://plnkr.co/edit/qhUdNhjSN7NlP4xRVcEA?p=preview
我对AngularJS还是很陌生，我的方法可能不是最好的，所以任何不同的想法当然都会受到赞赏！
由于您正在使用隔离作用域，因此一个问题是resource在父作用域上，并且在指令中不可见。而且我想你在寻找ng-model而不是在寻找ng-bind。
另外，由于您想绑定到namein resource，因此我们需要以某种方式进行绑定。
因此，这是您的模板html的一种方法（请注意为$parent解决范围问题而添加的内容.name（和（如果愿意，可以使用变量以编程方式添加，或者将其指定为属性的一部分））。
var html = '<div>' + scope.widgetType.label + ':<input ng-model="' + '$parent.' + iAttrs.bindTo +'.name'+ '" /></div>';
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句