2016-07-22 249 views
1

我是Angularjs和Ionic的新手。我目前正在構建我的第一個應用程序,我想知道,是否有任何方法可以在主控制器中注入表達式並在所有其他控制器中使用它們。AngularJS將對象從主控制器傳遞到其他控制器

因此,不要在每個控制器中輸入$ scope,$ http,$ Ionicpopup。我想把它放在我的主控制器中,並在所有其他控制器中使用它們。

var app = angular.module('app.controllers',[]);

你能告訴我這是什麼嗎?

+0

不幸的是,您必須將它們注入每個需要這些依賴關係的控制器中。這就是角度的工作原理。至於你的第二個問題,那將是一個角度模塊。 – hsiung

+0

@hsiung,我明白了,你能告訴我是否有辦法讓我自己的表情在不同的控制器中使用嗎?無需在每個控制器中初始化 – noor

+0

您可以[繼承控制器](http://blog.mgechev.com/2013/12/18/inheritance-services-controllers-in-angularjs/)大多數建議使用服務和發射事件關於控制器之間通信的範圍 –

回答

1

我們通常使用的服務控制器之間的通信的呼叫。

在下面的示例中,我們創建了animalService,並將它注入到兩個控制器。然後我們使用$手錶來監控這些變化。

http://plnkr.co/edit/hfKuxJO2XZdB6MsK7Ief

(function() { 
 

 
    angular.module("root", []) 
 
     .controller("leftAnimal", ["$scope", "animalService", 
 
     function ($scope, animalService) { 
 

 
      $scope.findNewAnimal = function() { 
 
       var randNum = Math.floor(Math.random() * animalPool.length); 
 
       $scope.animal = animalPool[randNum]; 
 
       console.log("Left Click Index: " + randNum); 
 
       animalService.setAnimal(randNum); 
 
      }; 
 

 
      $scope.$watch(function() { 
 
       return animalService.getAnimal(); 
 
      }, function (value) { 
 
       $scope.animal = animalPool[value]; 
 
      }); 
 
     } 
 
     ]) 
 
     .controller("rightAnimal", ["$scope", "animalService", 
 
     function ($scope, animalService) { 
 

 
      $scope.findNewAnimal = function() { 
 
       var randNum = Math.floor(Math.random() * animalPool.length); 
 
       $scope.animal = animalPool[randNum]; 
 
       console.log("Right Click Index: " + randNum); 
 
       animalService.setAnimal(randNum); 
 
      }; 
 

 
      $scope.$watch(function() { 
 
       return animalService.getAnimal(); 
 
      }, function (value) { 
 
       $scope.animal = animalPool[value]; 
 
      }); 
 
     } 
 
     ]) 
 
     .factory("animalService", [function() { 
 
      var index = 0; 
 
      function getAnimal() { 
 
       return index; 
 
      } 
 
      function setAnimal(newIndex) { 
 
       index = newIndex; 
 
      } 
 
      return { 
 
       getAnimal: getAnimal, 
 
       setAnimal: setAnimal, 
 
      } 
 
     }]); 
 

 
    var animalPool = [{ 
 
     name: "Baby Quetzal", 
 
     img: "http://i.imgur.com/CtnEDpM.jpg", 
 
     baby: true 
 
    }, { 
 
     name: "Baby Otter", 
 
     img: "http://i.imgur.com/1IShHRT.jpg", 
 
     baby: true 
 
    }, { 
 
     name: "Baby Octopus", 
 
     img: "http://i.imgur.com/kzarlKW.jpg", 
 
     baby: true 
 
    }]; 
 
})();
<!DOCTYPE html> 
 
<html ng-app="root"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div class="row"> 
 
     <div class="text-center"> 
 
      <h2>Pick an Animal</h2> 
 
     </div> 
 
     <div ng-controller="leftAnimal" class="col-md-6"> 
 
      <div class="animalImage"> 
 
       <img class="img-center" ng-src="{{animal.img}}"/> 
 
      </div> 
 
      <div class="animalName">{{animal.name}}</div> 
 
      <div class="animalDescription">{{animal.description}}</div> 
 
      <button type="button" ng-click="findNewAnimal()" 
 
        class="btn btn-info img-center"> 
 
       Change 
 
      </button> 
 
     </div> 
 
     <div ng-controller="rightAnimal" class="col-md-6"> 
 
      <div class="animalImage"> 
 
       <img class="img-center" ng-src="{{animal.img}}" /> 
 
      </div> 
 
      <div class="animalName">{{animal.name}}</div> 
 
      <div class="animalDescription">{{animal.description}}</div> 
 
      <button type="button" ng-click="findNewAnimal()" 
 
        class="btn btn-info img-center"> 
 
       Change 
 
      </button> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

+0

謝謝,這是我想要的。我非常感謝你粘貼所有代碼,它幫助我更好地理解! – noor

0

在AngularJS中,您必須將您的依賴關係注入到每個控制器中。這樣,每個控制器只具有它所需的依賴關係,而不是任何無關的依賴關係。

var app=angular.module('app.controllers', []); 

是你是如何告訴你想一個新的模塊AngularJS。然後添加東西的模塊,你只是做喜歡

app.controller('controllerName', function() {/* your stuff here */}); 
app.filter('filterName', function() {/* your stuff here */}); 
+0

謝謝您的回答。那麼我還有一個問題,有沒有辦法讓我自己的表達方式在不同的控制器中使用?無需在每個控制器中初始化 – noor

+0

是的,看看我剛剛發佈的新答案。 – Davis

0

爲了使自己的表達,並在你的代碼的其他部分使用它嘗試是這樣的:

var myApp=angular.module('myApp', []); 
myApp.value('clientId', 'a12345654321x'); // this sets a value 

然後,如果你有clientId爲無論它在哪裏,它都將等於a12345654321x反恐執行局。

要使用在其他地方你的價值只是它作爲一個依賴

myApp.controller('mycontroller', ['clientId', function(clientId) { 
    console.log(clientId); 
}]); 

對於更復雜的行爲,你可以進入其他類型AngularJS提供商,如工廠。以下是供參考的文檔:https://docs.angularjs.org/guide/providers

相關問題