Question

我对这个UI有点新意 - 我知道它非常强大，但我在处理它时遇到了问题，我之前使用的是AngularJS，但不是经常使用，而这次我真的想要使用它，所以我的问题是这样的（我在这里搜索但对我来说没有运气）：

方案是我在该页面上有Index.html我有两个视图这是＆＃34; 新闻＆＃34;和＆＃34; Testi ＆＃34;两者都局限于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';
});

我的问题是我试图访问＆＃34; welcomeMessage＆＃34;在我的home.html页面上但是不能，当我在我的控制器上放置一个断点时它没有被击中似乎控制器不存在是多么奇怪。

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

最后，您如何添加工厂？

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

或

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

TIA。

我在添加评论时遇到了问题，因为我没有意识到我需要在这里编辑我的问题。无论如何，对于我的问题，我能够通过不同的页面加载控制器，但我仍然无法在Index.html上加载控制器，我尝试更新.state - ＆gt;尝试了不同的方法，即使用＆＃39;＆＃39; /＆＃39;，＆＃39; index＆＃39;在意见中。

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

但是控制器仍未加载，具体而言我尝试在我的Index.html {{welcomeMessage}}上添加此行，以验证控制器是否已正确加载。

Answer 1

当您向var str = `<pre class="ql-syntax"><code><html><body>Will this work?</body></html></code></pre>`; var matches = str.match(/(<pre?\s.+?>)|(<code>)|[^\1].+(?=<\/code>)/g); var div = document.createElement("div"); document.body.appendChild(div); var pre = matches.shift(); div.innerHTML = pre; var code = matches.shift(); div.firstChild.innerHTML = code; var html = matches.shift(); div.firstChild.firstChild.textContent = html;添加<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>属性时，原始的views，state属性将被忽略，因此您必须绑定template中的控制器}。

templateUrl

对于views：在定义之后，您可以按照发布的方式注入它。

参考此plunker。

Answer 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'
            }
        },
    })    
});

Answer 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是最佳做法

AngularJS ui-route $ state，$ scope和controller event loading

3 个答案: