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

Question

在一个大的angularjs应用程序中，我有一个新的html模板文件和一个控制器，我想构建一个布局，因为我'D希望能够从$ scope对象调用一些数据。

我还为此创建了一条新路线，以便我有一个干净的工作空间。

，但我不想将其包含在主索引。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文档中找到了这一点：

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中调用它的方式(或属性。

例如，如果您想将其更改为上课，则将您的指示定义更改为：

.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

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

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