2017-08-21 12 views
-1

このボタンは、ルートファイルに宣言されたファイルを開きます。ボタンボタンをクリックしてビュー(HTML)を開こうとしていますが、ボタンをクリックして新しいページを開けません。

ボタンをクリックすると、2つのtasbs(organizationPermissionConfig.html)の設定の新しいページが開きます。この最後のページには2つのタブがあり、各タブにはボタンをクリックする行のプロパティを編集できるテーブルがありますが、なぜこのボタンが新しいページを開いていないのか分かりません。

app.routes.js

.state('app.organizationPermissionsSettings', { 
      url: '/organization/permissionSettings/', 
      templateUrl: 'app/components/organizations/organizationPermissionsConfig.html', 
      resolve: { 
      deps: ['$ocLazyLoad', function ($ocLazyLoad) { 
       return $ocLazyLoad.load([ 
       { 
        insertBefore: '#load_styles_before', 
        files: ['assets/libs/chosen_v1.4.0/chosen.min.css', 
        'assets/libs/datatables/css/jquery.dataTables.css'] 
       }, 
       { serie: true, 
        files: [ 
        'assets/libs/chosen_v1.4.0/chosen.jquery.min.js', 
        'assets/libs/datatables/js/jquery.dataTables.js', 
        'assets/libs/bootstrap-datatables/bootstrap-datatables.js'          
        ]}]).then(function() { 
        return $ocLazyLoad.load([ 
         { 
         files: ['app/components/organizations/organizationsController.js', 
          'app/shared/layout/utils.js'] 
         } 
        ]) 
        }); 
      }] 
      }, 
      data: { 
      title: 'Settings', 
      } 
     }) 
.state('app.organization.graphs', { 
      url: '/graphs', 
      templateUrl: 'app/components/organizations/organizationGraphsView.html', 
      resolve: { 
      deps: ['$ocLazyLoad', function ($ocLazyLoad) { 
       return $ocLazyLoad.load([ 
       { 
        insertBefore: '#load_styles_before', 
        files: ['assets/libs/chosen_v1.4.0/chosen.min.css', 
        'assets/libs/datatables/css/jquery.dataTables.css'] 
       }, 
       { serie: true, 
        files: [ 
        'assets/libs/chosen_v1.4.0/chosen.jquery.min.js', 
        'assets/libs/datatables/js/jquery.dataTables.js', 
        'assets/libs/bootstrap-datatables/bootstrap-datatables.js' 

        ]}]).then(function() { 
        return $ocLazyLoad.load([ 
         { 
         files: ['app/components/organizations/organizationsController.js'] 
         } 
        ]) 
        }); 
      }] 
      }, 
      data: { 
      title: 'Organization Graphs', 
      } 
     }) 
     .state('app.organization.views', { 
      url: '/views', 
      templateUrl: 'app/components/organizations/organizationViewsView.html', 
      resolve: { 
      deps: ['$ocLazyLoad', function ($ocLazyLoad) { 
       return $ocLazyLoad.load([ 
       { 
        insertBefore: '#load_styles_before', 
        files: ['assets/libs/chosen_v1.4.0/chosen.min.css', 
        'assets/libs/datatables/css/jquery.dataTables.css'] 
       }, 
       { serie: true, 
        files: [ 
        'assets/libs/chosen_v1.4.0/chosen.jquery.min.js', 
        'assets/libs/datatables/js/jquery.dataTables.js', 
        'assets/libs/bootstrap-datatables/bootstrap-datatables.js' 

        ]}]).then(function() { 
        return $ocLazyLoad.load([ 
         { 
         files: ['app/components/organizations/organizationsController.js'] 
         } 
        ]) 
        }); 
      }] 
      }, 
      data: { 
      title: 'Organization Views', 
      } 
     }) 

organizationController.js

app.controller('OrganizationsController',['$rootScope', '$scope', '$modal', 'HelperService', 'AuthService', '$state', '$http', function ($rootScope, $scope, $modal, HelperService, AuthService, $state, $http) { 
     var controllerScope = $scope; 

     controllerScope.organizationsData = {}; 
     controllerScope.organizationsData.ajax = {url:'/api/organizations/', dataSrc:''}; 
     controllerScope.organizationsData.ajax.beforeSend = function (xhr) { 
      xhr.setRequestHeader("Authorization", AuthService.authToken()); 
     } 
     controllerScope.organizationsData.columns = [ 
      {"data":null,"render":function(data) { 
       return '<a href="/#/organization/'+data.id+'">'+data.data.name+'</a>'; 
      }}, 
      {"data":"domain","defaultContent":""}, 
      {"data":null, "orderable":false, "render":function(data){ 
       return '<button class="btn btn-default btn-sm" style="margin-right:5px;" onclick="angular.element(this).scope().openOrganizationPermissionsSettings(\''+data.id+'\')"><i class="fa fa-wrench"></i></button>' 
       +'<button class="btn btn-default btn-sm" style="margin-right:5px; " onclick=\'angular.element(this).scope().openNewOrganizationModal('+JSON.stringify(data)+')\'><i class="fa fa-pencil"></i></button>' 
       +'<button class="btn btn-default btn-sm" onclick="angular.element(this).scope().deleteOrganization(\''+data.id+'\')"><i class="fa fa-trash"></i></button>'; 
      }}]; 


     controllerScope.deleteOrganization = function (organizationId) { 
      HelperService.deleteItem(organizationId, 'organization', '/api/organizations/'); 
     }; 

     controllerScope.openNewOrganizationModal = function (organization) { 
      var modalInstance = $modal.open({ 
       templateUrl : 'newOrganizationModalContent.html', 
       controller: 'OrganizationsModalInstanceController', 
       resolve: {organization:function() {return organization}}, 
      }); 
     } 


     controllerScope.openOrganizationPermissionsSettings = function (organizationId) { 
      $state.go('app.organizationPermissionsSettings'); 
     }; 


    }]); 

app.controller('OrganizationsPermissionsSettingsController',['$rootScope', '$scope', '$modal', 'HelperService', 'AuthService', '$state', '$http', function ($rootScope, $scope, $modal, HelperService, AuthService, $state, $http) { 
     var controllerScope = $scope; 


     controllerScope.organizationGroups = []; 

     $http.get('/api/organization_permissions_groups').success(function (data) { 
      console.log("data ",data); 
      controllerScope.organizationGroups = data; 
     }); 

     controllerScope.openOrganizationPermissionsSettings = function (organizationId) { 
      $state.go('app.organizationPermissionsSettings'); 
     }; 

    }]); 


app.controller('OrganizationGraphsController',['$rootScope', '$scope', '$modalInstance', 'HelperService', '$http',  function ($rootScope, $scope, $modalInstance, HelperService, $http) { 

      var controllerScope = $scope; 

      controllerScope.organizationGroup = []; 

      console.log("GraphsModalInstanceController organization "+$rootScope.organization.id); 

      $http.get('/api/organization_permissions_groups/graphs/'+$rootScope.organization.id).success(function (data) { 
       controllerScope.organizationGroup = data; 
      }); 

      $scope.cancel = function() { 
       $modalInstance.dismiss(); 
      }; 
     } 
    ]); 

    app.controller('OrganizationViewsController',['$rootScope', '$scope', '$modalInstance', 'HelperService', '$http', 
    function ($rootScope, $scope, $modalInstance, HelperService, $http) { 

      var controllerScope = $scope; 

      controllerScope.organizationGroup = []; 

      $http.get('/api/organization_permissions_groups/views/'+$rootScope.organization.id).success(function (data) { 
       controllerScope.organizationGroup = data; 
      }); 

      $scope.cancel = function() { 
       $modalInstance.dismiss(); 
      }; 

    }]); 

organizationPermissionsConfig.html

<td><button class="btn btn-default btn-sm" ng-click="app.organization.graphs"><i class="fa fa-pencil"></i></button></td> 

<td><button class="btn btn-default btn-sm" ng-click="app.organization.views"><i class="fa fa-pencil"></i></button></td> 

答えて

0

この構文は、実際に間違っている:

ng-click="app.organization.graphs" 

コントローラー内に$stateを注入し、コントローラー内に関数を定義する必要があります。 :その後、

$scope.navigateToGraphs = function() { 
    $state.go('app.organization.graphs'); 
} 

そして、この関数にng-clickをバインド:

ng-click="navigateToGraphs()" 

それとも、またそれを行うために通常のHTMLを使用することができます。

<a ui-sref="app.organization.graphs">Navigate to graphs</a> 

私はそれが

+0

:だから$state.goを使用するメソッドを実装する必要があります。また、同じようui-srefディレクティブを使用することができますstate 'app.organizationPermissionsSettings' " –

+1

これはあなたのナビゲーションが動作していることを意味しています:)今問題はあなたの州の定義の中にあります。あなたはあなたが現在在留している州から到達できない州にアクセスしようとしています。通常はあなたが州にいることに依存し、現在の州の直属の子ではありません。 – quirimmo

+0

私のルートに定義しました上記のように "app.organizationPermissionsSettings"、 "app.organization.graphs"、 "'app.organization.views"ファイルを作成します。私は何を変える必要がありますか? –

0

を役に立てば幸いngClickは、$scopeのメソッドがclのときに呼び出されることを期待していますボタンをクリックするだけで、正しくないこのディレクティブに状態名を渡すだけです。から 『app.organization.graphs』を解決できませんでした:私は」エラーを取得OrganizationsPermissionsSettingsController内側となりましたことを実行しようとしました

<td><a ui-sref="app.organization.graphs"><button class="btn btn-default btn-sm"><i class="fa fa-pencil"></i></button></a></td> 
+0

「エラー:「app.organization.graphs」を「app.organizationPermissionsSettings」から解決できませんでした。 '' –

関連する問題