Question

在我的控制器依赖项数组中注入“$ location”之前，我有一个带有ng-click调用的按钮。函数'goToGetLocation（）'在petType.html的最顶部调用，函数在控制器的底部定义。你可以在这里看到我的按钮都没有调用任何函数：http://alainwebdesign.ca/pl2/#/petType

petType.html的控制器：

.controller('PetCtrl',["$location", function ($scope, $log, $location) {
    $scope.title1 = 'Button';
    $scope.title4 = 'Warn';
    $scope.isDisabled = true;


    $scope.activeMenu = '';

    var speed;

    $scope.setSpeed = function () {
        if ($scope.activeMenu == 'fast') {
            speed = 46;
            //alert(speed);
        }

        if ($scope.activeMenu == 'medFast') {
            speed = 35;
        }

        if ($scope.activeMenu == 'medium') {
            speed = 30;
        }

        if ($scope.activeMenu == 'medSlow') {
            speed = 23;
        }

        if ($scope.activeMenu == 'slow') {
            speed = 12;
        }

        $log.debug(speed);
        return speed;
    }

    function goToGetLocation() {
        $location.url($location.path() + "/" + speed + "/getLocation" );
        location.reload();
    }
}]);

petType.html：

<md-button ng-disabled="setSpeed() == null" ng-click="goToGetLocation()" sticky class="md-raised md-primary">Next</md-button>

<h2></h2>

<h2>Choose the pet type that best matches your pet</h2>

<div style="text-align: center">

    <button  style="height: 300px; width: 300px; display: block; margin: auto" class="button" 
    ng-class="{active : activeMenu === 'fast'}" ng-click="activeMenu = 'fast'; setSpeed();">
        <img height="220px" width="220px" src="images/greyhound.png" />
   </button>
    <h4>Fast (Avg Speed: 46km/h)</h4>
    <p>Includes dogs such as Greyhounds and German Shepherds</p>
    <br> <br>

    <button style="height: 300px; width: 300px; display: block; margin: auto" class="button" 
    ng-class="{active : activeMenu === 'medFast'}" ng-click="activeMenu = 'medFast'; setSpeed()">
    <img height="220px" width="220px" src="images/greatDane.png" />
   </button>
    <h4>Medium/Fast (Avg Speed: 35km/h)</h4>
    <p>Includes dogs such as Great Danes and Pitbulls</p>
    <br> <br>

    <button style="height: 300px; width: 300px; display: block; margin: auto" class="button" 
    ng-class="{active : activeMenu === 'med'}" ng-click="activeMenu = 'med'; setSpeed()">
    <img style="padding-right: 25px" height="220px" width="220px" src="images/husky.png" />
   </button>
    <h4>Medium (Avg Speed: 30km/h)</h4>
    <p>Includes dogs such as Giant Schnauzers and Siberian Huskies</p>
    <br> <br>

    <button style="height: 300px; width: 300px; display: block; margin: auto" class="button" 
    ng-class="{active : activeMenu === 'medSlow'}" ng-click="activeMenu = 'medSlow'; setSpeed()">
    <img height="220px" width="220px" src="images/golden.png" />
   </button>
    <h4>Medium/Slow (Avg Speed: 23km/h)</h4>
    <p>Includes dogs such as Golden Retrievers and Dachshunds</p>
    <br> <br>

    <button style="height: 300px; width: 300px; display: block; margin: auto" class="button" 
    ng-class="{active : activeMenu === 'slow'}" ng-click="activeMenu = 'slow'; setSpeed()">
    <img style="padding-left: 25px" height="220px" width="220px" src="images/cat.png" />
   </button>
    <h4>Slow (Avg Speed: 12km/h)</h4>
    <p>Includes cast as well as dogs such as Basset Hounds and Bulldogs</p>
    <br> <br>
</div>

我有一个非常相似的控制器和视图，IS工作：

查看：http://alainwebdesign.ca/pl2/#/100/getLocation

控制器：

.controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval", "$state", "$stateParams",
      function ($scope, $log, GoogleMapApi, $interval, $state, $stateParams) {
          $log.currentLevel = $log.LEVELS.debug;
          var center = { latitude: parseFloat($stateParams.lat), longitude: parseFloat($stateParams.lon) };
          //alert(JSON.stringify(center));
          Object.freeze(center); //caused TypeError: Cannot assign to read only property ('latitude') ...

          console.log($stateParams);

          $scope.map = {
              center: center,
              pan: false,
              zoom: 16,
              refresh: false,
              events: {},
              bounds: {}
          };

          $scope.map.circle = {
              id: 1,
              center: center,
              radius: 500, //(current time - date lost)*km/hour
              stroke: {
                  color: '#08B21F',
                  weight: 2,
                  opacity: 1
              },

              fill: {
                  color: '#08B21F',
                  opacity: 0.5
              },
              geodesic: false, // optional: defaults to false
              draggable: false, // optional: defaults to false
              clickable: true, // optional: defaults to true
              editable: false, // optional: defaults to false
              visible: true, // optional: defaults to true
              events: {
                  dblclick: function () {
                      $log.debug("circle dblclick");
                  },
                  radius_changed: function (gObject) {
                      var radius = gObject.getRadius();
                      $log.debug("circle radius radius_changed " + radius);
                  }
              }
          }

          //Increase Radius:
          $interval(function () {
              $scope.map.circle.radius += parseFloat($stateParams.speed); //dynamic var
          }, 1000); //end of interval function


      } ]) //end of controller

Answer 1

您的依赖关系数组不完整。它应该具有与函数参数一样多的字符串参数并且具有相同的顺序

更改

.controller('PetCtrl',["$location", function ($scope, $log, $location) {

要

.controller('PetCtrl',["$scope", "$log", "$location", function ($scope, $log, $location) {

Answer 2

您必须使用相同的进样数和顺序定义控制器功能的参数。

试试这个：

.controller('PetCtrl',["$scope", "$log", "$location", function ($scope, $log, $location) {

致以最诚挚的问候，

Bernardo Baumblatt

在控制器依赖项数组中添加“$ location”会停止工作中的ng-click

2 个答案: