Question

我是Angularjs和Ionic的新手。我正在构建我的第一个应用程序，我想知道，有什么方法可以在主控制器中注入表达式并在所有其他控制器中使用它们。

所以不要在每个控制器中键入$ scope，$ http，$ Ionicpopup。我想把它放在我的主控制器中，并在所有其他控制器中使用它们。

var app = angular.module（'app.controllers'，[]）;

你能告诉我这叫什么吗？

Answer 1

我们通常使用服务来在控制器之间进行通信。

在下面的示例示例中，我们创建 animalService ，并将其注入两个控制器。然后，我们使用 $ watch 来监控更改。

http://plnkr.co/edit/hfKuxJO2XZdB6MsK7Ief

＆＃13;

(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
    }];
})();

＆＃13;

<!DOCTYPE html>
<html ng-app="root">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@3.3.6" 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="angular.js@1.4.x" 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>

＆＃13;

Answer 2

在AngularJS中，您必须将依赖项注入每个控制器。通过这种方式，每个控制器只具有它所需的完全依赖性而不是任何无关的依赖性。

该行

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

就是告诉AngularJS你想要制作一个新模块的方法。然后向模块添加内容，只需调用

即可

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

Answer 3

要创建自己的表达式并在代码的其他部分使用它，请尝试以下方法：

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

AngularJS将对象从主控制器传递到其他控制器

3 个答案: