AngularJS ui-route $state, $scope 和控制器事件加载答案

【问题标题】：AngularJS ui-route $state, $scope and controller event loadingAngularJS ui-route $state, $scope 和控制器事件加载
【发布时间】：2017-04-25 05:56:46
【问题描述】：

我对这个 UI-Route 有点陌生，我知道它非常强大，但我在处理它时遇到了问题，我以前使用过 AngularJS，但不是那么频繁，这次我真的很想使用它，所以我的问题是这样的（我到处搜索，但没有运气）：

场景是我在那个页面上有 Index.html 我有两个视图 “News”和“Testi”都被限制在一个div中

知道我添加了 App.js（其中将包含我的 AngularJS 实现的初始代码）：

var app = angular.module('wrcheese', ['ui.router']);

app.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

    .state('home', {
        url: '/home',
        templateUrl: '/Views/Index.html',
        views: {            
            'main': {
                templateUrl: '/Views/App/home.html'
            },
            'testi': {
                templateUrl: '/Views/App/testimonial.html'                
            }
        },
        controller: 'HomeCtrl'
    })    
});

我的控制器是这样的（homeController.js）

'use strict';
app.controller('HomeCtrl', function ($scope, $state) {
    $scope.welcomeMessage = 'Welcome to WeRCheese';
});

我的问题是我试图访问 home.html 页面上的“welcomeMessage”但无法访问，奇怪的是当我在控制器上设置断点时它似乎没有被命中控制器不存在。

也许我做错了，因为我之前使用 ngRoute 时没有任何问题。

最后，如何添加工厂？

app.controller('HomeCtrl', function ($scope, $state, homeFactory) {
});

或

app.controller('HomeCtrl', ['$scope', '$state', 'homeFactory', function ($scope, $state, homeFactory) { }]);

TIA。

我在添加评论时遇到问题，因为我没有意识到我需要在这里编辑我的问题。无论如何，对于我的问题，我能够通过不同的页面加载控制器，但我仍然无法在 Index.html 上加载控制器我尝试更新 .state -> 尝试不同的方法，即使用''，'/'，视图中的“索引”。

.state('home', { 
    url: '', or '/', or 'index',
    templateUrl: '/Views/Index.html',
    controller: 'HomeCtrl'

但是控制器仍然没有加载，具体来说，我已经尝试在我的 Index.html {{ welcomeMessage }} 上添加这一行，只是为了验证控制器是否已正确加载。

【问题讨论】：

发布你的html代码

标签： angularjs angular-ui-router

【解决方案1】：

当您将views 属性添加到state 时，原来的template、templateUrl 属性将被忽略，因此您必须在views 中绑定控制器。

$stateProvider.state('home', {
    url: '/home',
    templateUrl: 'Views/Index.html',      <----- will be ignored
    views: {
        'main': {
            templateUrl: 'Views/App/home.html',
            controller: 'HomeCtrl'
        },
        'testi': {
            templateUrl: 'Views/App/testimonial.html',
            controller: 'HomeCtrl'
        }
    },
    controller: 'HomeCtrl'        <----- will be ignored
})

对于factory：定义后，你可以通过你发布的两种方式注入。

参考这个plunker。

【讨论】：

【解决方案2】：

var app = angular.module('wrcheese', ['ui.router']);

app.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

    .state('home', {
        url: '/home',
        views: {            
            'main': {
                templateUrl: '/Views/App/home.html',
                controller : 'HomeCtrl'
         },
            'testi': {
                templateUrl: '/Views/App/testimonial.html',                
                controller : 'HomeCtrl'
            }
        },
    })    
});

【讨论】：

【解决方案3】：

你可以这样做

.state('home', {
        url: '/home',
        views: { 
            '@': {
                templateUrl: '/Views/Index.html',
                controller: 'HomeCtrl',
                controllerAs: 'vm' 
            },      
            'main@home': {
                templateUrl: '/Views/App/home.html'
            },
            'testi@home': {
                templateUrl: '/Views/App/testimonial.html'                
            }
        }
    });

使用controllerAs 是最佳做法

【讨论】：