0

popup-windowマークアップに、それぞれのディレクティブで処理するタグ要素があります。さまざまな場所で表示または非表示にするウィジェットをさらに追加したい場合は、これらすべての要素をページ マークアップに配置する必要があります。したがって、次のようになります。

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

DOM でオンザフライで追加した要素に対してディレクティブを動的に実行することは可能ですか? マークアップをきれいにしたい。

4

1 に答える 1

1

$compile サービスを使用して、ディレクティブを含むテンプレートをコンパイルし、それをページに追加できます。<twitter-stream></twitter-stream>つまり、誰かが「Twitter ストリームを追加」ボタンをクリックするまで追加したくない場合は、次のようにすることができます。

<!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-22T09:39:26.477 に答える