在angularjs控制器中调用了两次函数

Question

我是angular js的新手，目前仍然遇到非常有线的bug。控制器中的函数在按路由加载视图调用时会运行两次。

http://html" target="_blank">jsfiddle.net/4gwG3/5/

您将看到两次警报！

我的观点很简单

我的应用程序代码如下

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

//channel controller
IB.controller('channelsController', function ($scope, $routeParams) {
    $scope.greet = function () {
        alert('hi');
    };
});


IB.config(function ($routeProvider) {
    $routeProvider
    .when('/channels', {
        controller: 'channelsController',
        template: '{{greet()}}'
    })

    .otherwise({ redirectTo: '/channels' });

});

Answer 1

首先检查您是否没有两次初始化Angular应用程序（通过使用 ng-app 自动进行初始化）。

一次，我有2个带有ng-app的html页面（一个用于login.html，另一个用于main.html），这是我后来意识到的一个问题。

其次，对我来说，最重要的是，检查您是否已将控制器附加到多个元素。如果使用 路由， 这是一种常见情况。

就我而言，我像这样导航到DashboardController：

app.config(function($routeProvider){
    $routeProvider
    .when('/', {
        controller: 'DashboardController',
        templateUrl: 'pages/dashboard.html'
    })
});

但是我在dashboard.html中也有这个：

<section class="content" ng-controller="DashboardController">

它指示AngularJS两次消化我的控制器。

要解决此问题，您有两种方法：

像这样从您的html文件中删除 ng-controller ：

<section class="content">

或从路由中删除 控制器 （通常位于app.js中）：

app.config(function($routeProvider){
$routeProvider
        .when('/', {
            templateUrl: 'pages/dashboard.html'
        })
    });