Angular指令-模板和COM更改

Question

我有一個角度指令：

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/

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

Answer 2

對於遇到這種情況的任何人，我的確做到了。 這是有效的方法，它在指令中使用了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