在angularjs控制器内调用两次函数

Question

我是角度js的新手,目前仍然坚持使用非常有线的bug.控制器中的函数在通过路径加载的视图调用时运行两次.

http://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自动初始化).

有一次我有两个带有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'
        })
    });