[英]Angular directive - templates and com changes
我有一个角度指令:
var myApp = angular.module('myApp',[]);
var HelloDirective = function() {
return {
scope : {
t : "=",
list: "="
}, // use a new isolated scope
restrict : 'AE',
replace : false,
template : '<h3>{{list}}</h3>',
link : function(scope, elem, attrs) {
var p = document.createElement("p");
p.innerHTML = "asdddf";
var ul = document.createElement("ul");
var li = document.createElement("li")
li.innerHTML = "List Item";
ul.appendChild(li);
elem.append(p);
elem.append(ul);
scope.list = "HI";
}
};
}
myApp.directive("hello", HelloDirective);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name = 'Superhero';
}
如何使scope.list
正确显示?
另外,使ul
显示为列表的最佳方法是什么? 我应该使用elem.append(ul);
还是可以说scope.list = ul
使其显示出来?
我不明白...
这是小提琴: http : //jsfiddle.net/mbaranski/znhnseep/
尝试这个
app.directive('hello', ['$sce', function ($sce) {
return {
scope: {
t: "=?",
list: "=?"
},
restrict: 'AE',
replace: false,
template: "<h3 ng-bind-html='list'></h3>",
link: function (scope, elem, attrs) {
var p = document.createElement("p");
p.innerHTML = "asdddf";
var ul = document.createElement("ul");
var li = document.createElement("li");
li.innerHTML = "List Item";
ul.appendChild(li);
//elem.append(p);
//elem.append(ul);
scope.list = $sce.trustAsHtml(ul.outerHTML);
}
};
}]);
对于遇到这种情况的任何人,我的确做到了。 这是有效的方法,它在指令中使用了compile
函数。
这是指令:
/**
* Shows how to modify the original element in compile
* to add a class to the DOM.
*/
var myApp = angular.module('myApp', []);
var HelloDirective = function($sce) {
return {
scope: {
list: "="
}, // use a new isolated scope
restrict: 'AE',
replace: false,
template: '<h3 ng-bind-html="list"></h3>',
compile: function(tElem, attrs) {
var d = document.createElement("div");
d.className += " tree";
var baseElem = tElem[0];
baseElem.className ? baseElem.className += " compiled-element" : baseElem.className = "compiled-element";
baseElem.appendChild(d);
console.log(tElem);
return function(scope, elem, attrs) {
scope.list = $sce.trustAsHtml("<i>Link function value, too</i>");
var ul = document.createElement("ul");
var li = document.createElement("li")
li.innerHTML = "ASDF";
ul.appendChild(li);
var elementResult = elem[0].getElementsByClassName('tree');
console.log(elementResult[0]);
elementResult[0].appendChild(ul);
console.log(scope.list);
}
}
};
}
/**
var p = document.createElement("p");
p.innerHTML = "asdddf";
var ul = document.createElement("ul");
var li = document.createElement("li")
li.innerHTML = "List Item";
ul.appendChild(li);
elem.append(p);
elem.append(ul);
*/
myApp.directive("helloDirective", HelloDirective);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller('MyCtrl', function($scope) {
$scope.name = 'Angular Directive';
$scope.osList = "Original value";
});
这是一个小提琴: http : //jsfiddle.net/mbaranski/46dd6p1p/这是一个对其进行扩展的博客文章: http : //blog.mikeski.net/blog_post/455
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.