角型コントローラが表示されない変数を表示しています

Question

角型コントローラが対話していません。 ng-appが含まれており、ng-controllerもあります。

meanJSを使用します。ここ

は図である：ここ

<section ng-app="my-module" ng-controller="MyModuleController"> 
    <div> 
    {{ costumers[0] }} 
    </div> 
</section> 

コントローラである：

(function() { 
    'use strict'; 

    angular 
    .module('my-module') 
    .controller('MyModuleController', MyModuleController); 

    MyModuleController.$inject = ['$scope']; 

    function MyModuleController($scope) { 
    var vm = this; 

    // My module controller logic 
    // ... 

    $scope.costumers = [{ 
     name: 'John Doe', 
     city: 'New York' 
    }, { 
     name: 'Peter Griffin', 
     city: 'San Francisco' 
    }]; 

    init(); 

    function init() { 

    } 
    } 
})(); 

Answer 1

この

angular 
    .module('my-module',[]) 
    .controller('MyModuleController', MyModuleController); 

リトルサイドノートのようなアプリケーションモジュールに空の依存性注入器を初期化します。コントローラ内でthisを使用して変数を宣言したい場合は、scopeを使用しないでください。 HTMLでも代わり$scopeをvmを使用する

(function() { 
 
    'use strict'; 
 

 
    angular 
 
    .module('my-module',[]) 
 
    .controller('MyModuleController', MyModuleController); 
 

 
    MyModuleController.$inject = ['$scope']; 
 

 
    function MyModuleController($scope) { 
 
    var vm = this; 
 

 
    // My module controller logic 
 
    // ... 
 

 
    $scope.costumers = [{ 
 
     name: 'John Doe', 
 
     city: 'New York' 
 
    }, { 
 
     name: 'Peter Griffin', 
 
     city: 'San Francisco' 
 
    }]; 
 

 
    init(); 
 

 
    function init() { 
 

 
    } 
 
    } 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<section ng-app="my-module" ng-controller="MyModuleController"> 
 
    <div> 
 
    {{ costumers[0] }} 
 
    </div> 
 
</section>

Answer 2

てみて、コントローラを使用します。

function MyModuleController($scope) { 
    var vm = this; 

    vm.costumers = [{ 
     name: 'John Doe', 
     city: 'New York' 
    }, { 
     name: 'Peter Griffin', 
     city: 'San Francisco' 
    }]; 

    init(); 

    function init() { 

    } 
    } 

HTML：

<section ng-app="my-module" ng-controller="MyModuleController as vm"> 
    <div> 
    {{ vm.costumers[0] }} 
    </div> 
</section> 

Answer 3

いくつかの髪を失うした後、私は問題を解決しました。ルーティングファイルに問題がありました。コントローラーの名前が間違っています。 "引数 'MymoduleController'は関数ではなく、定義されていません」とブラウザコンソールに表示され、間違っていることが示されます。 MymoduleControllerではなく、MyModuleControllerであることを意図していました。助けてくれてありがとう、問題解決！ブラウザのコンソールで

(function() { 
    'use strict'; 

    //Setting up route 
    angular 
    .module('my-module') 
    .config(routeConfig); 

    routeConfig.$inject = ['$stateProvider']; 

    function routeConfig($stateProvider) { 
    // My module state routing 
    $stateProvider 
     .state('my-module', { 
     url: '/my-module', 
     templateUrl: 'modules/my-module/client/views/my-module.client.view.html', 
     controller: 'MyModuleController', 
     controllerAs: 'vm' 
     }); 
    } 
})();