AngularJS 绑定到视图的指令动态模型

Question

我有以下指令：

app.directive('renderPartial', function($compile) {
   return {
      restrict: "AE",
      link: function(scope, element, attrs) {
         var path = getPartial(attrs.module, attrs.file);
         //path = /abc/some_file.html
         scope[attrs.model] = path;
         var el = $compile('<div ng-include="attrs.model"></div>')(scope);
         element.html(el);
      }
   }
});

在我看来：

<render-partial module="abc" file="some_file" model="some_model"></render-partial>

现在由于某种原因这不起作用，没有错误。但是文件没有被渲染。

Plunkr 我的问题：http://plnkr.co/edit/CkTE2pV4i5LvL60NEYfE

Answer 1

更新

根据评论中附带的 plunker：-

你需要做几件事

1) 使用var el = $compile('<div ng-include="'+attrs.model+'"></div>')(scope);

2) element.append(el); 而不是平面 HTML :-P

Plunker

Answer 2

你可以让它动态化，像这样：

myApp.directive('renderPartial', function($compile) {
   return {
      restrict: "AE",
      link: function(scope, element, attrs) {
         var path = 'test.html';
         scope.path = path;
         var el = $compile('<div ng-include="path"></div>')(scope);  
         element.append(el);
      }
   }
});

Fiddle

AngularJS 绑定到视图的指令动态模型

AngularJS directive dynamic model binding to view

angularjs

angularjs-directive