Question

我需要将javascript库与index.html分开，我的意思是，我有许多文件包含控制器，指令，服务或样式，例如：search.html，searchController.js，searchDirective.js，searchCss.css

在search.html中必须包含控制器，指令和css，这些文件不能从index.html调用。问题是当search.html调用一个指令的文件时，这个文件无效，文件已加载但代码不起作用，我想代码需要编译，但我不知道该怎么办。

我发布了一个例子：

这是我的index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>GSL</title>

<link rel="stylesheet" type="text/css" media="screen" href="resources/bootstrap/css/bootstrap.min.css" />
<link href="resources/css/jqueryui.css" rel="stylesheet">
<link href="resources/css/mystyle.css" rel="stylesheet" >
</head>
<body>

    <div id="content" ng-view></div>

   <script src="resources/js/jquery.min.js"></script>
   <script src="resources/js/jqueryui.js"></script> 
   <script src="resources/js/angular.js"></script>
   <script src="resources/js/angular-resource.js"></script>
   <script src="resources/js/angular-cookies.js"></script>
   <script src="resources/js/angular-sanitize.js"></script>
   <script src="resources/js/underscore.js"></script>
   <script src="resources/apps/app.js"></script>    
   <script src="resources/directives/directiveSearch.js"></script>  
   <script src="resources/directives/directiveItemUl.js"></script>  
   <script src="resources/services/paginationService.js"></script>
</body>
</html>

这是我的观点test.html

<div>
    <td>Width:</td>
    <td><input type="text" ng-model="test" id= "txtTest" name= "txtTest" validate-test></td>
</div>

<script src="resources/controllers/controllerTest.js"></script>
<script src="resources/directives/directiveTest.js"></script>

var app = angular.module("app",
        [ 'ngCookies' , 'ngSanitize']).config(
        function($routeProvider,$locationProvider, $httpProvider) {

            $routeProvider.when('/test', {
                templateUrl : 'resources/views/test.html',
                controller: 'testCtrl'
            });

            $routeProvider.otherwise({
                redirectTo : '/'
            });                      

        });

这是控制器testCtrl

function testCtrl($scope){
    console.log("This is a test");
}

这是指令validateTest - ＆gt;这是行不通的

angular.module("app").directive('validateTest',function(){
    return{
        restrict : "A", 
        link: function (scope, element, attributes){            
            element.on('keyup', function(e){
                console.log(e.keyCode);
            });
        }
    };
});

我的问题是指令，请有人帮助我！

动态加载 - JavaScript库

0 个答案: