javascript - angular 使用了ui-router 之後controller裡面的內容不執行
phpcn_u1582
phpcn_u1582 2017-05-19 10:33:31
0
1
532

angular 使用了ui-router 之後controller裡面的內容不執行

這個是index頁面↓

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
    <p ui-view="commonHeader"></p>
    <script src="js/jquery.js"></script>
    <script src="js/angular.js"></script>
    <script src="js/angular-ui-route.js"></script>
    <script src="js/header.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

這個是公共頭頁面↓

<nav id="header" ng-controller="HeaderPage">
    <p class="navbar navbar-fixed-top">
        <p class="container">
            <p class="navbar-header">
                <a href="/demo/index.html" class="navbar-brand">
                    <img src="/demo/images/logo.png" height="40">
                </a>
            </p>
            <ul class="nav navbar-nav navbar-right">
                <li ng-repeat="item in navLists">
                    <a href="javascript:;" class="ng-binding">
                        {{ item.name }}
                        <span>{{ item.en }}</span>
                    </a>
                </li>
            </ul>
        </p>
    </p>
</nav>

這個是公共頭的js↓

var header = angular.module('Header', []);

header.factory('HeaderFac', [function () {
    var HeaderFac = {};
    var lists;
    
    HeaderFac.setNavList = function (navList) {
        console.log(navList);
        lists = navList;
        console.log(lists);
    };
    
    HeaderFac.getNavList = function () {
    
        return lists;
    
    };
    
    return HeaderFac;
    
}]);

header.controller('HeaderPage', ['$scope', '$state', '$http', 'HeaderFac', function ($scope, $state, $http, HeaderFac) {
    
    $scope.$watch(HeaderFac.getNavList, function (newVal, oldVal, scope) {
        
        $scope.navLists = newVal;
        
    });
    
}]);

這個是index的js↓

var condition = "";

var getUserAdProgram = "";

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

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise(condition);
    $stateProvider.state('app', {
        url: condition,
        views: {
            'commonHeader': {
                templateUrl: '/demo/common/nav.html'
            }
        }
    });
}]);

app.controller('Header', ['$scope', '$http', '$stateParams', 'HeaderFac', '$location', function ($scope, $http, $stateParams, HeaderFac, $location) {

    HeaderFac.setNavList([
        {
            name: '首页',
            en: 'HOME',
            link: 'index.html'
        }, {
            name: '关于我们',
            en: 'ABOUT US',
            link: 'page/about.html'
        }, {
            name: '设计师风采',
            en: 'STYLE',
            link: ''
        }, {
            name: '作品展示',
            en: 'SHOW',
            link: ''
        }, {
            name: '教学与交流平台',
            en: 'TEACHING',
            link: ''
        }, {
            name: '更多选项',
            en: 'MORE',
            link: ''
        }, {
            name: '联系我们',
            en: 'CONNECT',
            link: ''
        }
    ])

}]);

程式碼會執行到app.controller('Header', ['$scope', '$http', '$stateParams', 'HeaderFac', '$location', function ($scope, $http, $stateParams , HeaderFac, $location) {} 這一行但是function裡面的內容不會執行
請問一下是什麼問題

phpcn_u1582
phpcn_u1582

全部回覆(1)
给我你的怀抱

這個叫Header的controller並沒有對應的頁面啊

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板