$ stateProviderを使用してテンプレート/ビューを切り替える単純なアプリケーションがあります。私は、コントローラ内の次のハンドラを持って
<a href="#" ng-click="manage('area')">Areas</a>
<a href="#" ng-click="manage('vendors')">Vendors*</a>
:私は2つのリンクを持っている
var vm = $scope;
vm.manage = function (type) {
if (type == 'vendors') {
vm.message = 'Comming soon.';
} else {
$state.go(type);
}
};
私は地域のリンクをクリックすると、私は$state.go(...)
コールを使用して(area
に状態を変更して、Iテンプレート(およびHTMLコンテンツ)を参照してください。次に、ベンダーのリンクをクリックすると、デフォルトのメッセージ「Comming soon」が表示されます。次に、「エリア」リンクを再度クリックすると、エリアコントローラからconsole.logが取得されます。出力(テンプレートとその中のhtmlコンテンツ)ここでは、これは非常に単純な作業です静的な<h1></h1>
を取得すると、私は$state
の変更を要求します。
私は何とかメモリに何か詰まっているか、何かを想定し$scope.apply()
も$scope = $scope.new
を試してみました。
私のモジュールは次のようになります。
'use strict';
(function() {
angular.module('areaModule', []).config(areaModule);
areaModule.$inject = ['$stateProvider'];
function areaModule($stateProvider) {
$stateProvider
.state('area', {
url: '/area',
templateUrl: 'app/assetManagement-app/modules/area/area.tmpl.html',
controller: 'area-controller'
});
}
})();
とコントローラがこの
'use strict';
(function() {
angular.module('areaModule').controller('area-controller', areaController);
areaController.$inject = ['$scope', '$state', 'areaService'];
function areaController($scope, $state, areaService) {
var vm = $scope;
// clean up any memory leaks
$scope.$on('$destroy', function() { });
// init()
vm.init = function() {
console.log('area controller');
};
vm.init();
return vm;
}
}());
のように見え、テンプレートは何が起こっているここ
<div class="container" style="margin: 10px 5px 10px 5px;">
<h1>Area Management View</h1>
</div>
のですか?