AngularJS-JavaScript不在局部视图中加载

Question

我尝试使用指令加载脚本，但无法正常工作，我有一个应用程序在其中应在局部视图中显示图表（仪表表），尝试将脚本粘贴到局部视图内，但无济于事，即使指令不起作用。 但是，如果该页面正常加载了工作，则当该页面用作部分页面时，它不会显示任何图表（与脚本相关的内容）

有没有简单的示例可以使脚本在angularjs的部分视图中加载？

index.html

<!DOCTYPE html>
<html>
<head>
    <!-- CSS (load bootstrap) -->
    <link rel="stylesheet" href="bootstrap.min.css">

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  

    <!-- JS (load angular, ui-router, and our custom js file) -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>

    <script src="angular-ui-router.min.js"></script>

    <script src="app.js"></script> 
</head>

<body ng-app="routerApp">

<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">

    <ul class="nav navbar-nav">
        <li><a ui-sref="home">Customer Details</a></li>
        <li><a ui-sref="about">Job Details</a></li>
    </ul>
</nav>

<!-- MAIN CONTENT -->

<div class="container">
    <div ui-view></div>
</div>   

</body>
</html>

app.js

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

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

    $urlRouterProvider.otherwise('/home');

    $stateProvider

        // HOME STATES AND NESTED VIEWS  

        .state('home', {
            url: '/home',
            templateUrl: 'partial-home.html'
        })


        .state('home.list', {
            url: '/list',
            templateUrl: 'partial-home-list.html',
            controller: function($scope) {
                $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
            }
        })


            //JOB Section Navigations

.state('job', {
            url: '/jobdetails',
               templateUrl: 'jobdetails.html' 

        })


        // ABOUT PAGE AND MULTIPLE NAMED VIEWS  
        .state('about', {
            url: '/about',
            views: {
                '': { templateUrl: 'partial-about.html' },
                'columnOne@about': { template: 'Look I am a column!' },
                'columnTwo@about': { 
                    templateUrl: 'table-data.html',
                    controller: 'scotchController'
                }
            }

        });

});

routerApp.controller('scotchController', function($scope) {

    $scope.message = 'test';

    $scope.scotches = [
        {
            name: 'Macallan 12',
            price: 50
        },
        {
            name: 'Chivas Regal Royal Salute',
            price: 10000
        },
        {
            name: 'Glenfiddich 1937',
            price: 20000
        }
    ];

});

routerApp.directive('jsSidebar' , function() {
   return {
        link: function(scope, element, attrs) {

           alert('testing');

        }
   }
});

partial-home.html

<div > Home partial page </div>
 <a ui-sref="job"> Click to Display Chart   </a>
<div ui-view></div>

jobdetails.html

<script >
//Chart library is mentioned which is over 2000lines
</script>
<!-- here  chart supposed to be rendered-->
<div id="id_of_chart"></div>
<div jsSidebar >Testing purpose</div>

Answer 1

ng-view不会在模板内加载脚本。
检查此。.https ://stackoverflow.com/a/18220411/4578788了解更多详细信息。

Answer 2

Angular使用精简版的jquery（jQLite），它具有一些DOM限制，从而阻止了它在部分视图中执行脚本文件。

解

在index.html中引用主要AngularJS脚本之前，请先引用jQuery脚本。 这将使使用jQuery而不是jQlite变得棱角分明。

AngularJS-JavaScript不在局部视图中加载

问题描述

2 个解决方案

解决方案1
2 2015-02-24 11:55:47

解决方案2
0 2017-05-21 06:03:21

AngularJS-JavaScript不在局部视图中加载

问题描述

2 个解决方案

解决方案1 2 2015-02-24 11:55:47

解决方案2 0 2017-05-21 06:03:21

解决方案1
2 2015-02-24 11:55:47

解决方案2
0 2017-05-21 06:03:21