0

我需要将 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 -> 不起作用

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

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

4

0 回答 0