2016-07-22 115 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

相关问题