如何在不使用标签的情况下使用 AngularjS 视图（.html 文件）

Question

在一个大 AngularJS 应用程序中，我有一个新的 HTML 模板文件和一个控制器，我想使用这个临时视图构建设计师给我的布局，因为我希望能够从 $scope 对象调用一些数据。

我还为它创建了一条新路线，这样我就有了一个干净的工作环境space。

但我不想将它包含在主 index.html 文件中，如下所示：

<my-new-template></my-new-template>

我只想开始使用它，而不必在任何地方包含此 HTML 元素，这可能吗？到目前为止，这是控制器：

.directive('portfolio', [
function () {
        return {
            templateUrl: "views/temporary-view.html",
            scope: {
                data: "="
            },

            link: function (scope, element, attrs, ctrl) {                  
                scope.stuff = 'stuff';                  
            }
        };
    }])

观点：

<nav class="portfolio-view">
       {{stuff}}
</nav>

感谢您帮助像我这样的菜鸟！ :)

Answer 1

在您的指令中，您可以更改 restrict 选项以更改指令在 HTML 中的调用方式。有 4 个选项。我在 AngularJS documentation for directives:

中找到了这个

restrict
String of subset of EACM which restricts the directive to a specific directive declaration style. If omitted, the defaults (elements and attributes) are used.

E - Element name (default): <my-directive></my-directive>
A - Attribute (default): <div my-directive="exp"></div>
C - Class: <div class="my-directive: exp;"></div>
M - Comment: <!-- directive: my-directive exp -->

默认情况下，它使用 EA，因此作为元素（您不想在 HTML 中调用它的方式）或属性。

如果您希望将其更改为 class 等，则将您的指令定义更改为：

.directive('portfolio', [
function () {
        return {
            restrict: 'C',
            templateUrl: "views/temporary-view.html",
            scope: {
                data: "="
            },

            link: function (scope, element, attrs, ctrl) {                  
                scope.stuff = 'stuff';                  
            }
        };
    }])

你可以这样称呼它：

<div class="portfolio"></div>

我想这就是你的意思，希望对你有所帮助！

Answer 2

所以我只是将 .directive 更改为 .controller 并将其与应用程序中的其他控制器而不是指令一起发布......我想我对此感到困惑！

.controller('PortfolioView', ["$scope",
    function ($scope) {
        $scope.stuff = 'stuff'; 
    }])

如何在不使用标签的情况下使用 AngularjS 视图（.html 文件）

How to use an AngularjS View (.html file) without using it's tags

angularjs

angular-routing

angular-controller

angular-template