anglejsのsecond.jsファイルの別のコントローラにfirst.jsファイルの1つのコントローラ値を渡す方法

Question

こんにちは私は2つのjsファイルを持っています。私は の値を渡す必要があります1つのjsファイルから別のjsファイルへ angularjs.s私はnavbarをユーザに送り、 adminログインを表示する必要があります。この中

<form name="vm.loginForm" method="post" class="form-horizontal" data-ng-submit="vm.login(vm.getUser);"> 
         <div class="col-xs-12 input-group"> 
          <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
          <input id="login-username" type="email" class="form-control" name="username" placeholder="Email" data-ng-model="vm.getUser.Username" required> 
         </div> 
         <div class="col-xs-12 input-group margin-top-20"> 
          <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 
          <input id="login-password" type="password" class="form-control" name="password" placeholder="Password" data-ng-model="vm.getUser.Password" required value="admin"> 
         </div> 
         <div class="col-xs-12 margin-top-20"> 
          <span class="pull-left"> 
           <input id="login-remember" type="checkbox" name="remember" value="1"> Remember me 
          </span> 
          <span class="pull-right"> 
           <a href="#">Forgot Password?</a> 
          </span> 
         </div> 
         <div class="col-xs-12 margin-top-20"> 
          <button type="submit" class="btn btn-block btn-success"> 
           Login 
           <i class="fa fa-refresh fa-spin" ng-show="vm.login.progress"></i> 
          </button> 
         </div> 
        </form> 

logincrl.js

login.controller("loginCtrl", ['$rootScope', '$scope', '$state', '$location', 'Flash', 'apiService', '$http', 
    function($rootScope, $scope, $state, $location, Flash, apiService, $http) { 
     var vm = this; 
     $scope.title="Test"; 
     vm.login = function(data) { 
      vm.login.progress=true; 
      var url = "http://52.9.55.95:91/api/Login/ValidateUser?username=" + $scope.vm.getUser.Username + "&password=" + $scope.vm.getUser.Password; 
      $http({method: 'GET', url: url}). 
    success(function(data, status, headers, config) { 

      $scope.RoleCode == data.RoleCode; 

     vm.login.progress=false; 
     $state.go('app.dashboard'); 

    }). 
    error(function(data, status, headers, config) { 
     vm.login.progress=false; 
     swal({ title: "Warning!", text: "Invalid User Credentials!", type: "warning", confirmButtonText: "OK" }); 

    }); 

     } 


    } 
]); 

私は別のjsファイルに$ scope.role = data.RoleCodeのような値を渡す必要があるファイルをJS。

appctrl.js 

app.controller("appCtrl", ['$rootScope', '$scope', '$state', '$location', 'Flash', 'appSettings', 
function ($rootScope, $scope, $state, $location, Flash, appSettings) { 

if($scope.Rolecode == 01){ 
vm.menuItems = [ 
     // { 
     //  title: "Dashboard", 
     //  icon: "dashboard", 
     //  state: "dashboard" 
     // }, 
     { 
      title: "Employees", 
      icon: "users", 
      state: "employees" 
     }, 
     { 
      title: "Customers", 
      icon: "users", 
      state: "customers" 
     }, 
}else(Rolecode=02){ 
vm.menuItems = [ { 
      title: "Customers", 
      icon: "users", 
      state: "customers" 
     }, 
]} 
]}]); 

注：私は、メニューバーを表示する必要がある、ログイン、RoleCode = 01によると、管理者は、一度に表示する必要があることを意味し、Rolecode = 02は、ユーザが一度 表示私は渡す方法を教えてください意味します値と バイオリンを作り、それが私のために理解することは非常に簡単だろう与え、

app.html 
     <section class="sidebar"> 
      <!-- Sidebar user panel --> 
      <ul class="sidebar-menu"> 
       <li class="treeview" ui-sref-active="active" ng-click="vm.sideBar();" data-ng-repeat="menu in vm.menuItems"> 
        <a ui-sref="app.{{menu.state}}"> 
         <i class="fa fa-{{menu.icon}}"></i> <span>{{menu.title}}</span> 
        </a> 
       </li> 
      </ul> 
     </section> 

ください。

は値を渡す方法を助けることができます。別のjsの中であなただけの役割の値を格納する場合、あなたは$ rootScope.Role = data.RoleCode、その後、別のコントローラに$のrootScopeを注入して取得$を使用することができます

Answer 1

ファイル異なるコントローラと異なるファイルをJS rootScope.Role。 または$ emitと$ broadcastを使ってコントローラー間で値を渡すことができます。

Answer 2

私は、あなたはすべてのコントローラでは、あなたは、あなたが役割で作業することができますし、すべてのページにこの役割にアクセスできるサービスを作成し、各コントローラにサービスを注入することができ、ここでservicesで

Answer 3

をその再利用可能なこれを行うだろうAngularJsサービスを使用して、あるコントローラから別のコントローラに値を渡すことができます。異なるjsファイルにfirstCtrl、secondCtrl、およびyourServiceがあると仮定し、index.html内のこれらのファイルへの参照を追加する必要があります。私はサンプルコードを含んだ。それからアイデアを得ることができるあなたの意志を願っています。

index.htmlを

<script src="firstCtrl.js"></script> 
    <script src="secondCtrl.js "></script> 
    <script src="yourService.js"></script> 

コントローラーおよびサービス

/* Assume firstCtrl in seperate js file */ 
 
angular.module('yourAppName').controller('firstCtrl', function($scope, yourService) { 
 
    /*Set data to service*/ 
 
    yourService.data = $scope.data; 
 
}); 
 

 
/*End firstCtrl*/ 
 

 
/* Assume secondCtrl in seperate js file */ 
 
angular.module('yourAppName').controller('secondCtrl', function($scope, yourService) { 
 
    /*Get data from service*/ 
 
    var data = yourService.data; 
 
}); 
 

 
/*End secondCtrl*/ 
 

 
/* Assume yourService in seperate js file */ 
 
angular.module('yourAppName').factory('yourService', function() { 
 
    var data = null; 
 
    return { 
 
    data: data 
 
    } 
 
}); 
 
/*End yourService*/

Answer 4

我々はcontrollersとの間でデータを設定および取得するserviceを作成することができますinject私たちがそれを使用したいコントローラ機能のそのサービス。

サービス：

app.service('setGetData', function() { 
    var data = ''; 
    getData: function() { return data; }, 
    setData: function(requestData) { data = requestData; } 
}); 

コントローラ：

loginctrl.js

app.controller('loginctrl', ['setGetData',function(setGetData) { 

    // To set the data from the one controller 
    $scope.RoleCode == data.RoleCode; 
    setGetData.setData($scope.RoleCode); 

}]); 

appctrl.js

ここで

app.controller('appctrl', ['setGetData',function(setGetData) { 

    // To get the data from the another controller 
    var res = setGetData.getData(); 
    console.log(res); 

}]); 

、我々はloginctrlは、データを設定するために使用され、appctrlがデータを取得するために使用されていることがわかります。このように、あるコントローラのデータを別のコントローラに共有することができます。