自定义AngularJS指令不起作用

时间:2015-07-27 07:32:06

标签: javascript angularjs angularjs-directive

我在AngularJS 1.4.3中制作自定义指令。以下是我的指令代码。

'use strict';

angular.module('psFramework').directive('psFramework', function () {
    return {
        transclude: true,
        scope: {

        },
        controller: 'psFrameworkController',
        templatesUrl: 'ext-modules/psFramework/psFrameworkTemplate.html'
    }
});

这是我的控制器psFrameworkController

'use strict';

angular.module('psFramework').controller('psFrameworkController',
    ['$scope',
        function ($scope) {

        }
    ]);

我的模块psFrameworkModule

'use strict';

angular.module('psFramework', ['psMenu', 'psDashboard']);

模板psFrameworkTemplate.html,非常简单

<h1>Hello</h1>

当我将<ps-framework></ps-framework>标记放入index.html文件时,它会以某种方式呈现模板。

这是我的index.html

<body class="container-fluid">
    <ps-framework></ps-framework>
</body>

1 个答案:

答案 0 :(得分:4)

它是templateUrl NOT templatesUrl我想建议添加restrict属性:

'use strict';

angular.module('psFramework').directive('psFramework', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: {

        },
        controller: 'psFrameworkController',
        templateUrl: 'ext-modules/psFramework/psFrameworkTemplate.html'
    }
});