javascript - 如果在 $stateProvider 中指定,Angular ui-router 在加载时运行 Controller 两次

标签 javascript angularjs angular-ui-router

我看到我的 Controller 中的代码被运行了两次,因此显示在 chrome 开发工具的 console.log 窗口输出中

questions.html

<div ng-controller="questionController as vm"> </div>

questionController.js

var questionController = function($location, questionService, $env) {
    var vm = this;
    console.log('in the controller')  // this runs twice 
}

app.js

app.config([
    '$stateProvider',
    '$urlRouterProvider',
    '$locationProvider',
    function ($stateProvider, $urlRouterProvider, $locationProvider) {

        var viewBase = '/apps/src/views/';

        $urlRouterProvider.otherwise("/");

        $locationProvider.hashPrefix(''); // get rid of ! was getting #! 

        $stateProvider
            .state('questions',
            {
                url: "/questions",
                templateUrl: viewBase + "questions.html"//,
                //controller: "questionController"
                //views: {
                //
                //}
            });


    }]
);

注意我把路由中的controller: "questionController"注释掉了,否则跑了两次。

我知道我去年使用了 ui-router 并且我一直使用 controller: 没有任何问题。

也许一些新的版本组合导致了错误?

基于我正在尝试但未显示数据的答案

我正在使用 ui-grid

 <!--<div ng-controller="questionController as vm">-->

       <div ui-grid="{ data: vm }" class="grid"></div>

  <!--</div>-->

注意我用 ng-controller 注释掉了 div

  var vm = this
  var promise = questionService.getAllQuestions();

    promise.then(function(response) {
        vm.myData = response;
        console.log('questionCtrl promise data', vm.myData);
    });

console.log 确实可以吐出数据

固定

看来我不得不做

路线

     controller: "questionController",
     controllerAs : "vm"

      controller: "questionController"

然后

 <div ui-grid="{ data: vm.myData }" class="grid"></div>

最佳答案

这是因为您在 $stateProvider 中包含了 Controller 以及模板本身

<div ng-controller="questionController as vm"></div>

您可以从 HTML 中删除 ng-controller

关于javascript - 如果在 $stateProvider 中指定,Angular ui-router 在加载时运行 Controller 两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43009554/

相关文章:

javascript - angular js渲染如果

javascript - SPA 在在线托管中不起作用

javascript - 是否可以让 JS 函数的返回取决于用户操作?

javascript - 如何避免使用溢出

javascript - 防止表单 POST 被后退按钮取消

javascript - Angular-ui-tree drop INTO 节点

javascript - 如何从angularjs中的列表中删除特定行

javascript - ui-router 没有替换 index.html 中的 ui-view

javascript - 在index.html文件中使用JS变量

javascript - 呈现 Wiki 语法的最小方式(例如 MoinMoin Wiki)