Question

我正试图通过组件和模块来模块化我的功能。我想知道有没有将控制器路径仅包含在其相关指令中？

我试图拥有一个像这样结构的文件夹：

-app.js
-directives    
--slider
 ---slider.js
 ---slider.html
 ---slider-carousel-controller.js
 ---slider-single-controller.js

app.js

//require components
require('./directives/banner-slider/banner-slider.js');

我的自定义指令

app.directive('bannerSlider', [function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: "/directives/banner-slider/banner-slider.html",
    };
}])

我怎样才能做到这一点？

Answer 1

您计划为一个指令设置多少个相对路径？通常，指令用作具有重复属性的可重复组件，这些属性可以从指令父作用域继承，也可以作为隔离作用域（如果选择创建一个）。

在您的情况下，听起来您可能有一个具有多个属性的指令，并且根据这些属性，您将使用它们执行x，y和z。

IMO我会使用隔离范围，并通过指令属性作为模型传递属性。

app.directive('bannerSlider', [function() {
    return {
        scope:{
            property1: "=",
            property2: "="
        },
        restrict: 'E',
        replace: true,
        templateUrl: "/directives/banner-slider/banner-slider.html",
    };
}])

通过这种方式，您可以解除对指令父作用域的依赖性，并使用imo，指令的方式来使用它。

在你的HTML中

<banner-slider property1="value" property2="value"></banner-slider>

其中value是当前控制器范围内的任何数据。

Answer 2

应该可以。

只需命名您的控制器（别忘了调用控制器在index.html文件中的文件或其他）

app.directive('bannerSlider', [function() {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: "/directives/banner-slider/banner-slider.html",
            controller: 'yourControllerName'

        };
    }])

Angularjs创建独立的自定义指令

2 个答案: