Javascript Angularjs:控制器被多次调用_Javascript_Angularjs_Controller

Javascript Angularjs:控制器被多次调用

javascript angularjs

Javascript Angularjs:控制器被多次调用,javascript,angularjs,controller,Javascript,Angularjs,Controller,由于某种原因，当我在资源1和资源2之间切换时，我的控制器被双重调用代码如下： index.html <!DOCTYPE html> <html ng-app="multiple_calls"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <link rel="stylesheet" href="styl

由于某种原因，当我在资源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>

{{id}}

res.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>

{{id}}

如果单击第1项，然后单击第2项，您将看到“ResourceCalled”打印3次：资源之间的每次更改打印2次

有什么线索可以解释为什么会发生这种情况吗？

发现了一个完全相同的问题：

解决方案是在路由器url的末尾添加“/”：

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

如果您更改为angular版本1.1.5，这同样有效。我仍在学习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}
    })
  ....

另一个对我有效的解决方案是，如果您定义了一个指令，请尝试不要将其控制器设置为多次调用的控制器，只需使用

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

这也解决了我的问题。但是，我正在使用

$stateProvider

定义路由。