javascript - Angular 指令 - 模板和 com 更改

Question

我有一个 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';
}

如何让scope.list正确显示？

此外，使 ul 显示为列表的最佳方法是什么？我应该使用 elem.append(ul); 还是可以说 scope.list = ul 让它显示出来？

没听懂……

这是 fiddle : http://jsfiddle.net/mbaranski/znhnseep/

Answer 1

试试这个

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);
        }
    };
}]);