Question

我是Angular JS的新手，根据我得到的错误，我注意到注射问题。

我正在转换模板以进行练习。

我先为菜单制作了一个指令

 app.directive("bsnavbar", function () {
    return {
        restrict: "E",
        replace: true,
        transclude: true,
        templateUrl: "../components/navbar/Navbar.html",

        compile: function (element, attrs) {
            var li, liElements, links, index, length;
            liElements = $(element).find("#navbarul");

            if (attrs.currentTab === "Home") $(document.getElementById('homeLink')).addClass('active');
            if (attrs.currentTab === "About") $(document.getElementById('aboutLink')).addClass('active');
            if (attrs.currentTab === "Gallery") $(document.getElementById('galleryLink')).addClass('active');
            if (attrs.currentTab === "Contact") $(document.getElementById('contactLink')).addClass('active');
        }
    }
});

它本身运作良好。

然后我添加了一些功能，使用从JSON文件中读取数据的控制器使照片库更具动态性（在导航时，这仍然会移动到单独的页面gallery.html，gallery-1.html等）

var controllers = angular.module("controllers", []);

controllers.controller("GalleryPageCtrl", function GalleryPageCtrl($scope, $http, $stateParams) {
var gid = $stateParams.gid;

$scope.pageName = "Photography Gallery";
$scope.Description = "";
$http.get('/data/galleryItems.json')
                .then(function (response) { $scope.data = response.data.galleries });

});

再一次这很好。

然后我决定使用UI路由器缩小使用1页和html模板进行注入。一旦我这样做，一切似乎都很好，然后我开始出错了。

这可能与我如何拥有HTML有关吗？

<body ng-app="navbarapp">

<div id="container">
    <header>
        <bsnavbar id="nbar" current-tab="Home"></bsnavbar>
    </header>



    <div ui-view>


    </div><!-- View End-->



</div> <!--Container End-->
.....
// Scripts and End body //

这是吃饭的时间之一。我感谢任何帮助。

    <div class="preloader">
        <img alt="" src="images/preloader.gif">
    </div>

应用代码

"use strict";

(function () {

var app = angular.module("navbarapp", ["controllers","ui.router"]);

app.directive("bsnavbar", function () {
    return {
        restrict: "E",
        replace: true,
        transclude: true,
        templateUrl: "../components/navbar/Navbar.html",

        compile: function (element, attrs) {
            var li, liElements, links, index, length;
            liElements = $(element).find("#navbarul");

            if (attrs.currentTab === "Home") $(document.getElementById('homeLink')).addClass('active');
            if (attrs.currentTab === "About") $(document.getElementById('aboutLink')).addClass('active');
            if (attrs.currentTab === "Gallery") $(document.getElementById('galleryLink')).addClass('active');
            if (attrs.currentTab === "Contact") $(document.getElementById('contactLink')).addClass('active');
        }
    }
});


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

    $stateProvider
        .state('Home', {
            url: '/',
            controller: 'HomePageCtrl',
            controllerAs: 'home',
            templateUrl: 'components/index/index.html'
        });



    $stateProvider
        .state('GalleryIndex', {
            url:'Gallery',
            controller: 'GalleryViewControl',
            controllerAs: 'GalleryIndex',
            templateUrl: 'components/gallery/galleryIndex.html'
        });

}]);

}());

脚本

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
    <script src="components/controllers/controllers.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.migrate.js"></script>
    <script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.imagesloaded.min.js"></script>
    <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
    <script type="text/javascript" src="assets/simpletextrotator/jquery.simple-text-rotator.min.js"></script>
    <script type="text/javascript" src="js/retina-1.1.0.min.js"></script>
    <script type="text/javascript" src="js/SmoothScroll.js"></script>
    <script type="text/javascript" src="js/script.js"></script>

我调查了脚本，由于某种原因在本地使用它，我没有收到该错误消息。所以我把它包含在项目中。我仍然遇到路由无法正常工作的问题。使用URL我得到404并且ui-view区域中没有显示模板。菜单在ui-view区域外工作。

我尝试过添加

$urlRouterProvider.otherwise('/home');

并更新了

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

我得到了注射错误。我发现的每个页面都讨论了$ urlRouterProvider到目前为止它说它是UI-Router的一部分。这可能表明我的脚本仍未正确加载吗？

Answer 1

我改变了我在下面编写代码的方式，它运行正常。

angular.module('navbarapp').config(function ($stateProvider, $urlRouterProvider) {

$stateProvider
    .state('home', {
        url: '/home',
        controller: 'HomePageCtrl',
        controllerAs: 'Home',
        templateUrl: 'components/index/index.html'
    })
    .state('GalleryIndex', {
        url: '/Gallery',
        controller: 'GalleryViewControl',
        controllerAs: 'GalleryIndex',
        templateUrl: 'components/gallery/galleryIndex.html'
    });

$urlRouterProvider.otherwise('/home');
});

带注入的Angular JS路由问题

1 个答案: