Winkelregler, der keine Variablen zum Anzeigen druckt

Question

Angular Controller spricht nicht zur Ansicht. ng-app ist enthalten und ist auch ng-controller.

Verwendung von mainJS. Hier

ist die Ansicht:

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

Hier ist die Steuerung:

(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

Initialisieren Sie den leeren Abhängigkeits Injektor App-Modul wie diese

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

Kleine Randnotiz. Wenn Sie die Variable mit this im Controller deklarieren möchten, vermeiden Sie die Verwendung von scope. In der HTML-auch-Controller verwenden als

(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

Try vm stattdessen die $scope zu verwenden:

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

Nach ein paar Haare zu verlieren, Ich habe das Problem gelöst. Das Problem lag in der Routing-Datei, einem einfachen Rechtschreibfehler im Namen des Controllers. "Argument 'MymoduleController' ist keine Funktion, wurde undefined" in der Browser-Konsole aufgelistet, zeigt, dass es falsch geschrieben wurde. Es sollte MyModuleController und nicht MymoduleController sein. Danke für die Hilfe Jungs, Problem gelöst!

Hier ist die feste Routing-Datei:

(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' 
     }); 
    } 
})();