Question

我正在探索角度指令。我从

获取此示例后创建了2个简单的

https://maven.apache.org/plugins/maven-dependency-plugin/examples/purging-local-repository.html

angular.module('demo', [])

.controller('DemoController', function($scope) {
    $scope.rating = 42;      
})

.directive('rnStepper', function() {
    return {
        restrict: 'AE',
        scope: {
            value: '=ngModel'
        },
        template: '<button ng-click="decrement()">-</button>' +
                  '<div>{{ value }}</div>' +
                  '<button ng-click="increment()">+</button>',
        link: function(scope, iElement, iAttrs) {
            scope.increment = function() {
                scope.value++;
            }
            scope.decrement = function() {
                scope.value--;
            }
        }
    };
});

这包含在我的app.js文件中：../ app / scripts / app.js

现在我想将指令代码移到以下文件夹中的单独文件中：

../应用程序/ custom_directive / my_demo_directive.js

.directive('rnStepper', function() {
        return {
            restrict: 'AE',
            scope: {
                value: '=ngModel'
            },
            template: '<button ng-click="decrement()">-</button>' +
                      '<div>{{ value }}</div>' +
                      '<button ng-click="increment()">+</button>',
            link: function(scope, iElement, iAttrs) {
                scope.increment = function() {
                    scope.value++;
                }
                scope.decrement = function() {
                    scope.value--;
                }
            }
        };
    });

如何从新位置导出指令以及如何修改app.js文件中的指令声明？

感谢您的帮助

Answer 1

您只需从app.js中删除指令声明，然后将其放在另一个文件中：

angular.module('demo').directive('rnStepper', function() {
    // same as before
});

请注意，使用单个参数调用angular.module()，这意味着您希望获得对先前定义的名为“demo”的模块的引用（而当使用数组作为第二个参数调用时，{{1}定义一个新模块。）

另请注意，由于模块必须先前已定义，因此app.js必须位于HTML文件中angular.module()元素列表中的指令js文件之前。

Answer 2

您需要做的就是将模块声明复制到新文件中并移动指令（确保将模块声明保留在控制器中）。因此，在一个文件中，您将拥有angular.module('demo', []).controller(...)，而在另一个文件中，您将拥有angular.module('demo').directive(...)。由于它仍然在同一模块中，因此您不需要更改app.js，但您需要确保将新文件拉入index.html。

如果您还希望该指令位于不同的模块中，则需要将新模块添加到app.js文件中。

Answer 3

将指令代码移动到一个单独的文件中，如下例所示，将其作为脚本添加到html文档中，然后就可以了。

@Component({
    selector: "hello-world",
    template: `
    <ul>
        <li *ngFor="#name of names">Hello {{name}}</li>
    </ul>
    `
})

单独的角度指令

3 个答案: