在ng-view,angularjs中更改视图时,自定义指令不起作用

时间:2015-06-20 16:13:49

标签: angularjs

我有一个奇怪的问题。当ng-view显示"观看游戏视图"时,我正在创建一个移动侧栏指令(一个sibiling html元素到另一个元素,其中ng-directive打开),移动侧栏直观它的嵌套指令工作正常。但是当我进入"添加用户视图"移动侧栏指令停止工作。我在调试时没有出现脚本错误。

开始菜单Html

<div id="mainContainer" ng-controller="StartCtrl">
  <div id="menuContainer">
    <mobile-side-bar menu-id="{{menuIds}}" id="menu" class="hideElement">
        <div ng-include src="viewActions"></div>
    </mobile-side-bar>
  </div>

  <div ng-view class="view-animate"></div>

</div>

<script type="text/ng-template" id="addUsers.html">
   <advertise-game player-search-spinner-on="playerSearchSpinnerOn"> </advertise-game>
   <invite-friend></invite-friend>
   <player-search></player-search>
</script>

mainMenuRoute

 var mainMenuapp = angular.module('monopolyMenuModule', ['ngRoute', 'ngAnimate']);
 mainMenuapp.config(['$routeProvider', '$locationProvider',
   function ($routeProvider, $locationProvider) {
       $routeProvider
         .when('/',
             angularAMD.route({
                 templateUrl: 'Js/MonopolyMenu/StartMenu.html',
                 controller: 'StartCtrl',
                 controllerUrl: 'MonopolyMenu/monopoly-menu'
             })
       )
 .when('/WatchGame', angularAMD.route({
        templateUrl: 'Js/MonopolyMenu/WatchGameMenu.html',
        controller: 'WatchGameCtrl',
        controllerUrl: 'MonopolyMenu/monopoly-menu'
    })
    )
   .when('/RegisterUsers', angularAMD.route({
       templateUrl: 'Js/MonopolyMenu/AddUsers.html',
       controller: 'AddUsersCtrl',
       controllerUrl: 'MonopolyMenu/monopoly-menu'
       //controllerAs: 'addUsers'
   })
   ).otherwise({ redirecTo: "/" });

添加用户Html               添加用户

<div spinner spinneron="playerSearchSpinnerOn" close-spinner-call-back="endUserSearch()">

</div>

<div id="xs-userDetails" class="visible-xs list-group">

</div>
<div class="actionButtonsBar">
    <div class="actionButtonsPadding">
        <a href="javascript:history.back()">Back</a>
    </div>
</div>

添加用户Ctrl

monopolyMenuModule.controller('AddUsersCtrl', ['$scope',  'GameGroupDetails', 'viewNamesEnum', function ($scope, GameGroupDetails, viewNamesEnum) {

     // add code to call notifyUsers object.. watch pluralsight "connecting our server to client" and "how signalr works"
     $scope.playerSearchSpinnerOn = false;

     $scope.$parent.menuViewName = viewNamesEnum.AddUsersView;

     $scope.$parent.viewActions = "addUsers.html";

     $scope.$parent.menuIds = "1";

     $scope.endUserSearch = function () {
        // add code to remove gameDetails from list.
     }

 }])

1 个答案:

答案 0 :(得分:0)

由于您使用了id="addUsers.html"脚本模板,因此您的模板名称会在addUsers.html中存储为$templateCache网址。您需要将路径定义templateUrl中的/RegisterUsers更改为addUsers.html

<强>代码

.when('/RegisterUsers', angularAMD.route({
    templateUrl: 'addUsers.html', //<-- change here
    controller: 'AddUsersCtrl',
    controllerUrl: 'MonopolyMenu/monopoly-menu'
    //controllerAs: 'addUsers'
})