2

最初、私のcontroller.jsは次のようになりました

    function MyCtrl1() {}
MyCtrl1.$inject = [];


function MyCtrl2() {
}
MyCtrl2.$inject = [];

そして、このようなhtmlコード

    <!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
  <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
  <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
  <ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>

  <div ng-view></div>

  <div>Angular seed app: v <span app-version></span></div>
  <div>Author is : <span app-author></span></div>

  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>

ここにservice.jsコードがあります

    angular.module('myApp.services', []).
  value('version', '0.1')
  .value('author','Jay');

そして、directive.js コード

    angular.module('myApp.directives', []).
  directive('appVersion', ['version', function(version) {
    return function(scope, elm, attrs) {
      elm.text(version);
    };
  }])
  .directive('appAuthor', ['author', function(author) {
    return function(scope, elm, attrs){
        elm.text(author);
    };
  }]);

上記のコードは完全に正常に機能し、service.jsで表示versionおよび構成されました。author

以下のように controller.js を変更して新しいコントローラーを含めると、動作が停止し、バージョンも作成者も表示されません。変更されたコントローラーコードは次のとおりです

    function MyCtrl1() {}
MyCtrl1.$inject = [];


function MyCtrl2() {
}
MyCtrl2.$inject = [];

angular.module('myApp', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
  $scope.panes = [
    { title:"Dynamic Title 1", content:"Dynamic content 1" },
    { title:"Dynamic Title 2", content:"Dynamic content 2" }
  ];
};
TabsDemoCtrl.$inject = ['$scope'];

このことが機能しない理由を示すポインタ。

4

1 に答える 1

4

あなたの問題はここでのmyAppの再宣言のようです：

angular.module('myApp', ['ui.bootstrap']);

私が持っていたときに私はあなたの問題を再現することができました

angular.module('myApp', ['myApp.services', 'myApp.directives']);
angular.module('myApp', ['ui.bootstrap']);

に切り替える

angular.module('myApp', ['myApp.services', 'myApp.directives', 'ui.bootstrap']);

すべてが再び機能するようになりました。

于 2013-03-07T17:48:55.717 に答える