Angularjs：控制器被多次调用答案

【问题标题】：Angularjs: Controller is called multiple timesAngularjs：控制器被多次调用
【发布时间】：2013-10-04 09:27:06
【问题描述】：

由于某种原因，当我在资源 1 和资源 2 之间切换时，我的控制器被双重调用。

代码如下：

index.html

<!DOCTYPE html>
<html ng-app="multiple_calls">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <a href="#res/1">1</a>
    <a href="#res/2">2</a>

    <div ng-view>
    </div>
  </body>

</html>

app.js

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

app.
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/res/:id', {templateUrl: 'res.html',
                        controller: 'res'
      });
}]);


app.controller('MainCtrl', function($scope) {
});

app.controller('res', function($scope, $routeParams) {
  console.log('resource called')
  $scope.id = $routeParams.id;
});

res.html

{{id}}

http://plnkr.co/edit/HsCJmbllOcnlvlc1oiHa?p=preview

如果您单击第 1 项，然后单击第 2 项，您会看到“资源调用”被打印 3 次：资源之间的每次更改都打印 2 次。

任何线索为什么会发生这种情况？

【问题讨论】：

标签： javascript angularjs controller

【解决方案1】：

找到一个完全相同的问题：

AngularJs: controller is called twice by using $routeProvider

解决办法是在router url后面加上“/”：

-      when('/res/:id',
+      when('/res/:id/',

【讨论】：

这也解决了我的问题。但是，我使用$stateProvider 定义我的路线。

【解决方案2】：

如果您更改为 Angular 版本 1.1.5，这也有效

【讨论】：

【解决方案3】：

我还在学习 Angular，我在编写指令并包含控制器时遇到了这个问题。

我希望能对某人有所帮助，因为我花了很多时间来看看我做了什么：

.directive("list", function() {
  return {
    restrict: "E",
    transclude: true,
    replace: false,
    templateUrl: "contacts/list",
    controller: "CMSController", //- not needed at all
    controllerAs: 'cCtrl'//- not needed at all
  };
})

function config($routeProvider, $locationProvider, $httpProvider) {
  $routeProvider
   ....
    .when('/CMS', {
      templateUrl: 'contacts/index',
      controller: 'CMSController',
      controllerAs: 'cCtrl',
      access: {restricted: true}
    })
  ....

【讨论】：

【解决方案4】：

另一个对我有用的解决方案是，如果您定义了一个指令，请尽量不要将其控制器设置为多次调用的那个，只需使用 app.directive 将该指令添加到您的应用程序中。

    app.directive('myDirective',[ '$window', function ($window) {
    function link(scope, element) {
           // stuff
        });
    };

    return {
      restrict: 'A',
      scope: {offset: "@"},
      link: link,
      // controller: myCtrl //myCtrl was called multiple I comment this line
    };
  }]);

【讨论】：