javascript - Angular Controller 不止一次触发。只有某些

标签 javascript jquery angularjs angular-ui-router

我有包含以下内容的标记,然后我在不同的文件中定义了应用程序的不同部分。我遇到的问题是加载时主应用程序页面上的 Controller 导致每个嵌套 Controller 运行不止一次。我可以通过单击按钮更改为任何状态,但这些状态每次都会触发 2-3 次。

<html ng-app="myApp">

<body ng-controller="myController">

<div ng-controller="dashController">

   <div ng-controller="listController">

   </div>

</div>

</body>

</html>

我的 App.js

var myApp = angular.module('myApp', [
    'user.profile',
    'myApp.controllers',
    'myApp.directives',
    'ngCookies',
    'ngAutocomplete',
    'ui.router'
]).config(function($stateProvider, $urlRouterProvider, $locationProvider, $interpolateProvider) {

    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');

    $urlRouterProvider.otherwise('/');

    $stateProvider.
        state('app', {
            url: '/app',
            templateUrl: '/views/homepage',
            controller: 'MyCtrl1'
        });
    $locationProvider.html5Mode(true);

});

myApp.controllers

angular.module('myApp.controllers', ['ui.router','ngCookies']).
  controller('myController', function ($scope, $http,$cookies) {

       $scope.message = 'nothing to see here, move along';
       if ($cookies.userdata) {
           $cookies.userdata = $cookies.userdata.replace("j:", "");
           console.log($cookies);
       }



  });

user.profile.js

angular.module('user.profile', [
        'user.controllers',
        'ngAnimate',
        'ngCookies',
        'ngResource',
        'ngSanitize',
        'nouislider',
        'ui.router',
        'ui.bootstrap',
        'ngLinkedIn'
    ])
    .config(function($stateProvider, $urlRouterProvider, $locationProvider,$interpolateProvider, $linkedInProvider) {

        $interpolateProvider.startSymbol('{[{').endSymbol('}]}');

        $linkedInProvider.set('appKey', '753pos06f998t3')
                         .set('scope', 'r_fullprofile');
                         //.set('authorize', true);

        $locationProvider.html5Mode(true);

        $stateProvider
            .state('userDashboard', {
                controller: 'dashController'
            })
            .state('userList', {
                views : {
                    'popup' : {templateUrl: '/views/app/user/list/userList'}
                },
                controller: 'listController'
            });

    });

user.controllers.js

angular.module('user.controllers', ['ui.router', 'ngAutocomplete', 'nouislider', 'ui.bootstrap', 'ngCookies', 'ngLinkedIn', 'angularFileUpload','cgPrompt'])
    .directive('onLastRepeat', function () {
        return function (scope, element, attrs) {
            if (scope.$last) setTimeout(function () {
                scope.$emit('onRepeatLast', element, attrs);
            }, 1);
        };
    }).
    controller('dashController', function ($scope, $state, $modal, $log, $http, $cookies) {

      $scope.user = [];

    }).
    controller('listController', function ($scope, $http, $cookies) {

    });

我的应用程序也不会初始化,除非我运行 angular.bootstrap(document, ["myApp"]);

我不认为它在 $stateProvider 和 DOM 中定义了 Controller ...如果我从 DOM 中删除,即使在 Controller 触发后也没有任何 ng-clicks 工作...我还有一个 ng -click 改变状态,它的 Controller 在 stateProvider 和 DOM 中定义,它不会触发两次......但是在继续它的操作之前先再次启动另外两个 Controller 。

最佳答案

问题是您正在使用 routeProvider/stateProvider 定义 Controller ,即:

$stateProvider.state('userDashboard', {
                controller: 'dashController'
            })
            .state('userList', {
                views : {
                    'popup' : {templateUrl: '/views/app/user/list/userList'}
                },
                controller: 'listController'
            });

您正在使用

在 DOM 中重新定义它们
<div ng-controller="dashController">

删除一个或另一个但不要同时使用这两个,我建议删除在 DOM 中声明的那个,ng-controller="dashController"

干杯

关于javascript - Angular Controller 不止一次触发。只有某些,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26597998/

相关文章:

javascript - 如何使用 express-graphql 抛出多个错误?

javascript - 如果 else 语句检查并查看某个 img 标签是否附加到 div 将不会执行

angularjs - .get() 网址不是我所期望的

javascript - 使用 javascript 获取子项计数

html - 带有 md 虚拟中继器的 md 子标题行为不正常

javascript - 如何在 javascript 中修复此类定义以支持 instanceof 运算符

javascript - Parse.com 多个关系查询

javascript - 添加 HTML、CSS 和 Javascript 到 Joomla 主页

jquery - 切换不适用于所有选项卡和内联文本对齐

php - 使用 jquery 计算 <id> 中的总图像