動態添加，鏈接和渲染指令

我在我的標記中有一個標記元素popup-window，我用相應的指令處理。如果我想要更多這樣的小部件，我想要顯示或隱藏在不同的地方，我現在需要將所有這些元素放在我的頁面標記中，我不確定它看起來乾淨並且是最好的方法。所以它看起來像這樣：動態添加，鏈接和渲染指令

<popup-window></popup-window> 
<details-window></details-window> 
<share-widget></share-widget> 
<twitter-stream></twitter-stream>

是否可以動態地在DOM中動態添加的元素上運行指令？我想讓標記變得乾淨。

來源

2013-02-22 Sergei Basharov

您可以使用$ compile服務來編譯包含指令的模板並將其附加到您的頁面。也就是說，如果你不想添加<twitter-stream></twitter-stream>，直到有人點擊「添加推特流」按鈕，你可以做這樣的事情：

<!doctype html> 
<html ng-app="myApp"> 
<head> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script> 
    <script type="text/javascript"> 
    var myApp = angular.module('myApp', []); 

    myApp.controller('MainCtrl', ['$scope', function($scope){ 

    }]); 
    myApp.directive('twitterStream', function() { 
     return { 
      restrict: 'E', 
      link: function(scope, elem, attrs) { 
       elem.append('<p>A tweet: ' + Math.random() + '</p>') 
      } 
     } 
    }); 
    myApp.directive('createTwitterStreamButton', ['$compile', function($compile) { 
     return { 
      restrict: 'E', 
      template: '<button ng-click="add()">Add twitter stream</button>', 
      replace: true, 
      link: function(scope, elem, attrs) { 
       scope.add = function() { 
        var directiveElement = $compile('<twitter-stream></twitter-stream>')(scope); 
        directiveElement.insertAfter(elem); 
       } 
      } 
     } 
    }]); 
    </script> 
</head> 
<body ng-controller="MainCtrl"> 
    <create-twitter-stream-button></create-twitter-stream-button> 
</body> 
</html>

來源

2013-02-22 09:39:26

動態添加，鏈接和渲染指令

回答

相關問題