Javascript 使用JS在模板之间导航

我试图通过点击按钮在不同的html模板之间导航

我有主html和子html

Main.html：

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

控制器：

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

---

现在，如何将模板URL添加到按钮单击事件中。有谁能帮我介绍一下如何实现这个场景的示例。

因此，根据评论，这里的用例是在单击按钮时交换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>

模板1
模板2

---

按钮当然可以是包含的模板的一部分。

不太确定您在这里要做什么。用例是什么？您是想简单地转到一个新的url，还是想用一个新模板交换一个特定的dom元素？添加更多关于您尝试执行的操作的信息，我将尝试回答。@ErikHonn:Usecase是我需要用新模板交换特定的dom元素。

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

<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>