Question

我有一个app.js文件，我指定了我的依赖项：

angular.module("myApp", ['angular-jwt', 'chart.js']).config(...)

我想要一个指令的外部文件，所以在directives.js中我写道：

angular.module('myApp').directive(...)

对于controller.js来说同样的事情：

angular.module('myApp').controller('pokerstrazzkCtrl', function($scope, $http, jwtHelper) { ...

这是html文件中的包含脚本顺序：

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>
    <script src="Chart.min.js"></script>
    <script src="angular-chart.js"></script>
    <script src="controller.js"></script>
    <script src="directives.js"></script>
    <script src="app.js"></script>

在浏览器中显示时，我没有得到控制台错误，页面的源代码正是应该的，但我只看到背景，没有文字或其他元素。我做错了什么？

Answer 1

请尝试这个，

为模块声明一个全局变量。

var myApp = angular.module("myApp", ['angular-jwt', 'chart.js']).config(...)

然后使用此变量表示您的模块。

myApp.directive(...)

Answer 2

好的，我终于弄明白为什么它之前没有工作但是在没有使用全局变量的情况下定义模块，指令和控制器的真正正确的方法如下：

// app.js - main file, where the app module is defined
angular.module('yourApp', ['yourDependencies']).config(function Config($service1, $service2) {


// directives.js
angular.module('yourApp')

.directive('yourDirective', function() { ...

// controller.js
angular.module('yourApp').controller('yourController', function($service1, $two, ...) { ...

当然，您输入文件的顺序是基本的：

    <script src="app.js"></script>
    <script src="directives.js"></script>
    <script src="controller.js"></script>

app.js必须先于他的所有孩子（controller.js和directives.js），否则它将无效！这就是为什么它不适合我。当我颠倒directives.js和controller.js

时，一切都得到了解决

Answer 3

在外部文件中使用相同的变量var'myApp'

var myApp = angular.module('myApp',[]);

外部文件controller.js中的

myApp.controller('pokerstrazzkCtrl', ['$scope', function($scope) { 
 $scope.greeting = 'Hola!';
}]);

在exernal file directives.js
中的

myApp.directive('myCustomer', function() { 
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
  };
});

AngularJs外部文件控制器和指令：如何正确编写它们？

3 个答案: