使用指令Angular JS在模板之間導航

Question

單擊按鈕，我試圖在不同的html模板之間導航。

我有主html和子html。

Main.html：

<div id="main"></div>

Sub.html：

<div id="sub"></div>

Index.html：

<my-clicker on-click="ButtonClicked($event)">
            <button class="new_btn">Click Me</button>
        </my-clicker>

指令代碼：

app.directive('myClicker', function () {
        return {
            restrict: 'E',
            scope: {
                onClick: "&"
            },
            link: function($scope, element, attrs) {
                var button = $('.new_btn');
                button.bind("click", $scope.onClick);
                element.append(button);
            }
        };
    });

控制器：

$scope.ButtonClicked = function($event) {
            alert('hai');
        };

現在，如何將模板網址添加到按鈕單擊事件中。 任何人都可以通過示例幫助我，以實現此方案。

Answer 1

因此，根據評論，這里的用例是單擊按鈕時交換出DOM的一個特定部分。

在這種情況下，您不需要自定義指令，則應使用ng-include。 ng-include指令放置在div（或其他dom元素）上，並使該元素從指定的模板加載其內容。 您可以將此模板指定為變量，並且要交換div的內容時，只需更改變量即可。

這是一個例子：

<div id="swappable-content-area" ng-include src="currentTemplate">
    <!-- The content will appear here -->
</div>

<button ng-click="currentTemplate = 'mytemplate.html'">Template 1</button>
<button ng-click="currentTemplate = 'myothertemplate.html'">Template 2</button>

這些按鈕當然可以是所包含模板的一部分。