这是我的笨拙:http://plnkr.co/edit/BGD0n6gmDM3kv5akIn4l? p =info
我正在尝试制作一个视图工厂。理想情况下,我的控制器会将配置对象放入视图将用于呈现页面的范围内。它将用于构建导航和内容。我在尝试从该对象动态传递指令/部分视图引用时被卡住了。
这是我控制器中配置的一个隔离对象:
$scope.partials = [
{
name: 'Well',
method: 'showWell()',
isVisible: false,
template: '<container-well></container-well>'
}
];
这个问题的重点是模板属性。我在这里构建了指令以用作部分视图。
这是我的指令之一的示例:
myApp.directive('containerWell', function() {
return {
restrict: 'E',
replace: false,
templateUrl: 'containers/well.html',
scope: {}
}
});
这是 well.html 模板文件:
<div>
<h2 class="special">Well Types</h2>
<div class="well well-cc">
<p>Closed Well</p>
<p>CSS: .well.well-cc</p>
</div>
<div class="well well-cc open">
<p>Open Well</p>
<p>CSS: .well.well-cc.open</p>
</div>
<h3 class="alt">Wells can have different highlights applied with css classes</h3>
<div class="well well-cc highlight-warning">
<p>CSS: .well.well-cc.highlight-warning</p>
</div>
</div>
这是我认为失败的代码:
<div ng-repeat="partial in partials" ng-bind-html-unsafe="{{partial.template}}"></div>
生成的标记如下所示:
<div class="ng-scope" ng-bind-html-unsafe="<container-well></container-well>" ng-repeat="partial in partials"></div>
它只是基本上将字符串标记添加到属性而不是指令。
基本上,我希望能够以编程方式将指令添加到我的视图中。我不确定我想要做的事情是否可行。我不确定传递与指令等效的字符串是否可行。如果我很荒谬,我会喜欢一些建议,甚至是一些严厉的纠正;好吧,不要太严厉,也许是建设性的;)
这是我的笨拙:http://plnkr.co/edit/BGD0n6gmDM3kv5akIn4l? p =info
谢谢,
约旦