Question

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

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

但我不想将其包含在主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中调用它的方式）或属性。

如果您希望将其更改为例如类，则将指令定义更改为：

.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 View（.html文件）而不使用它的标签

2 个答案: