[英]Angular directive - templates and com changes
I have an angular directive: 我有一个角度指令:
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';
}
How can I make scope.list
display properly? 如何使
scope.list
正确显示?
Also, what is the best way to make the ul
show up as a list? 另外,使
ul
显示为列表的最佳方法是什么? Should I use elem.append(ul);
我应该使用
elem.append(ul);
or can I say scope.list = ul
to make it show up? 还是可以说
scope.list = ul
使其显示出来?
I don't get it... 我不明白...
Here's the fiddle: http://jsfiddle.net/mbaranski/znhnseep/ 这是小提琴: http : //jsfiddle.net/mbaranski/znhnseep/
try this 尝试这个
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);
}
};
}]);
For anyone that comes across this, I did get it sorted out. 对于遇到这种情况的任何人,我的确做到了。 Here is what works, and it uses the
compile
function in the directive. 这是有效的方法,它在指令中使用了
compile
函数。
Here's the directive: 这是指令:
/**
* 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";
});
Here is a fiddle: http://jsfiddle.net/mbaranski/46dd6p1p/ Here is a blog post that expands on it a little: http://blog.mikeski.net/blog_post/455 这是一个小提琴: http : //jsfiddle.net/mbaranski/46dd6p1p/这是一个对其进行扩展的博客文章: http : //blog.mikeski.net/blog_post/455
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.