2016-10-25 10 views
1

$ 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> 

のですか?

答えて

1

これはhrefとstate.goの間の衝突です。 htmlでhrefを削除すると、期待どおりに動作しています。