gpt4 book ai didi

javascript - 如何使用 AngularJS ng-include 之类的东西通过 id 插入 HTML

转载 作者:行者123 更新时间:2023-11-28 01:31:44 24 4
gpt4 key购买 nike

我正在使用 AngularJS 并将指令编译到我的主页中。该指令有一组按钮,这些按钮会根据指令中发生的情况而变化。我想将按钮移动到我页面中的菜单栏之类的地方,但菜单栏不是指令的一部分。

是否可以使用 ng-include 之类的东西在菜单栏中插入按钮?

我想做的一个例子:

<body ng-app="myApp" ng-controller="Controller">
<nav class="navbar">
<ul class="nav nav-pills">
<li>
<button>A permanent button</button>
</li>
<div ng-include="#other-buttons></div>
</ul>
</nav>

<my-directive></my-directive>

<script type="text/javascript">
angular.module('myApp', [])
.controller('Controller', ['$scope', function($scope) {
$scope.data = someData;
}])
.directive('myDirective', function() {
return {
template: '<div id="other-buttons" ng-switch="data">
<div ng-switch-when="this">
<li><button>This button</a></li>
</div>
<div data-ng-switch-when="that">
<li><button>That button</a></li>
</div>
</div>'
};
});
</script
</body

因此,根据某些数据,指令模板会有所不同,这应该会更改导航栏中的内容。那将如何工作?

最佳答案

您可以使用 $templateCache设置和获取模板,然后通过您提供的 ID 引用它们。您可以在页面上查看示例。

myApp.run(function($templateCache) {
$templateCache.put('buttons.html',
'<div id="other-buttons" ng-switch="data">
<div ng-switch-when="this">
<li><button>This button</a></li>
</div>
<div data-ng-switch-when="that">
<li><button>That button</a></li>
</div>
</div>'
);
});

然后用

加载到 ng-include
<div ng-include=" 'buttons.html' "></div>

考虑到您的指令和 Controller 共享相同的范围,并且您的导航栏位于您的 Controller 内,它们应该具有相同的行为。

但是,如果您要在不共享相同范围的应用程序的不同部分使用此设置,我建议您设置一个服务来弥合两者之间的差距。

关于javascript - 如何使用 AngularJS ng-include 之类的东西通过 id 插入 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30039332/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com