Question

我正在使用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

因此，根据某些数据，指令模板将有所不同，这应该会更改导航栏中的内容。如何做到这一点？

Answer 1

您可以使用$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>

考虑到您的指令和控制器共享相同的范围，并且您的导航栏属于您的控制器，它们的行为应该相同。

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

如何使用AngularJS ng-include之类的id插入HTML

1 个答案: