属性指令，从模板文件向dom添加元素

我有一个模板文件myfile.html，我在angular中编写属性指令，此指令的目的是插入myfile.html中的元素在声明了指令属性的元素之后。例如：将在该div后面插入myfile.html的所有内容。属性指令，从模板文件向dom添加元素

我试图做到这一点，像这样：

app.directive('myAngularDirective', function() { 
 
    return { 
 
    restrict: "A", 
 
    link: function(scope, element){ 
 
     var addMe = angular.element("myfile.html"); 
 
     element.after($copile(addMe)); 
 
     scope.$apply(); 
 
    } 
 
    } 
 
});

<h1>myfile.html</h1> 
 
<div ng-controller="myController"> 
 
    <div ng-click=clickMe()></div> 
 
</div>

<h1>my home page</h1> 
 
<div my-angular-directive></div>

但没有任何反应，myfile.html的内容不被添加到主页。

如果我写在普通的HTML功能后，像这样： element.after（“”）

它被添加到DOM，但角度不易消化的，和NG-点击不工作。

感谢您的帮助。

来源

2015-10-20 royi

可能创建小提琴还是笨重复制这个问题？ –

$compile("<html here>")返回一个模板函数，它需要在返回DOM之前传递作用域。如果你想从外部URL加载模板

app.directive('myAngularDirective', function($compile) { 
    return { 
    restrict: "A", 
    link: function(scope, element){ 
     var addMe = angular.element("<div>Hello World</div>"); 
     element.after($compile(addMe)(scope)); 
     scope.$apply(); 
    } 
    } 
});

：你的代码更改为以下，并预期它应该工作。你需要做一个模板请求。

app.directive('myAngularDirective', function($compile,$templateRequest) { 
    return { 
    restrict: "A", 
    link: function(scope, element){ 
     $templateRequest('index.html').then(function(tpl){ 
     var addMe = angular.element(tpl); 
     element.after($compile(addMe)(scope)); 
     scope.$apply(); 
     }); 
    } 
    } 
});

来源

2015-10-20 07:53:12

既不是templateUrl，也不是模板ddo属性对“属性”指令定义对象有效？或者是$ templateRequest唯一的方法？ – theoski

属性指令，从模板文件向dom添加元素

回答

相关问题