Question

我正在尝试在angular.js中编译过滤器页面。我的主要app.js中有四个文件，controllers.js（包含控制器和范围的控制器js文件），Filters.html（过滤器的html文件），directives.js（自定义指令js文件）和angular.js（使用）具有相应功能的基本角度js库）。在页面加载时，我得到带括号的角度表达式，即数据不在控制器的范围内获取，它在网页中显示{{..}}。有人可以建议什么是错的..已经发布了以下所有文件的代码：

Filters.html：

<html ng-app="app">

    <head>
        <title>Angular Filters</title>
        <link href="style/style.css" rel="stylesheet"/>
        <script src="lib/Angular/angular.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/directives.js"></script>
        <script src="js/app.js"></script>
        <style>
            .css-table-cell
            {
                border: 1px solid black;
            }
        </style>
    </head>

    <body ng-controller="registerReportCtrl">

        <section  ng-class="{fontSize: fs, redClass:true}">
            <header>
                <header-Line title="heading"></header-Line>
            </header>
        </section>

        <h2 class="center"> {{"Report on :" + title}}  </h2>

        <section class="center" style='width:50%'>
            <label>Sort By:</label>
            <select ng-model="sortBy">
                <option value="levelOfTraining">LevelOfTraining-increasing order</option>
                <option value="costOfTraining">CostOfTraining-increasing order</option>
                <option value="-levelOfTraining">LevelOfTraining-decreasing order</option>
                <option value="-costOfTraining">CostOfTraining-decreasing order</option>

            </select><br><br>

            <label>Filter By:</label>
            <input type="text"  ng-model="filterBy"/>
        </section> <br><br>
        <section class="css-section" >
            <form class="css-form">

                <section class="css-table" >

                    <!-- headers -->
                    <section class="css-table-row" >

                        <section class="css-table-cell">
                            <label class="css-tableheader">Sl No.</label>
                        </section>
                        <section class="css-table-cell">
                            <label class="css-tableheader">Username</label>
                        </section>
                        <section class="css-table-cell">
                            <label class="css-tableheader">Course Selected</label>
                        </section>
                        <section class="css-table-cell">
                            <label class="css-tableheader">Level Of Training</label>
                        </section>
                        <section class="css-table-cell">
                            <label class="css-tableheader">Date Of Registration</label>
                        </section>
                        <section class="css-table-cell">
                            <label class="css-tableheader">Cost Of Training</label>
                        </section>

                    </section>


                    <section class="css-table-row" ng-repeat="request in requests| orderBy: sortBy | filter:filterBy"> 

                        <section class="css-table-cell">
                            <label>{{$index + 1}}</label>
                        </section>             
                        <section class="css-table-cell">
                            <label>{{request.username}}</label>   
                        </section>
                        <section class="css-table-cell">                                
                            <label>{{request.courseSelected| uppercase | limitTo :"3"}}</label>    
                        </section>
                        <section class="css-table-cell">
                            <label>{{request.levelOfTraining| lowercase}}</label>     
                        </section>      
                        <section class="css-table-cell">
                            <label>{{request.dateOfRegistration| date: 'shortDate'}}</label> 
                        </section>
                        <section class="css-table-cell">                             
                            <label>{{request.costOfTraining| currency: "Rs." }}</label>
                        </section>  
                    </section>


                </section>

            </form>
        </section>
        <br>
        <section class="center">Total number of requests:{{requests.length|number:2}}</section>

    </body>
</html>

app.js

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

Directives.js

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

//directive as element

directives.directive('headerLine', function () {
    return {
        restrict: 'E',
        scope: {
            'head': '=title'

        },
        template: '<h2> {{ head }}</h2>'
    }
});

//directive as attribute

directives.directive('footerLine', function () {
    return {
        restrict: 'A',
        scope: {
            'footer': '=title'

        },
        template: '<h2> {{ footer }}</h2>'
    }
});

//directive as class

directives.directive('classDirective', function () {
    return  {
        restrict: "C",
        link: function ($scope, element) {
            element.bind("mouseenter", function () {
                element.css("border-radius", "10px");
                element.css("background-color", "orange");
            });
        }
    };
});

//directive as comment

directives.directive('commentDirective', function () {
    return  {
        restrict: "M",
        link: function () {
            console.log("Using directive as comment.");
        }
    };
});

Controllers.js

controllers.controller('registerReportCtrl',['$scope', function($scope){

$scope.heading="Example for Filters";
$scope.title="Course Registrations";
$scope.requests=[
                 {  
                     username:'Jack',
                     courseSelected:'AngularJS',
                     levelOfTraining:'Basic',
                     dateOfRegistration: new Date(),
                     costOfTraining: 18000                       
                 },
                 {
                     username:'Tom',
                     courseSelected:'AngularJS',
                     levelOfTraining:'Intermediate',
                     dateOfRegistration: new Date(),
                     costOfTraining: 25000                       
                 },
                 {
                     username:'Alice',
                     courseSelected:'AngularJS',
                     levelOfTraining:'Advanced',
                     dateOfRegistration: new Date(),
                     costOfTraining: 35000                       
                 },
                 {
                     username:'Vinu',
                     courseSelected:'BackboneJS',
                     levelOfTraining:'Basic',
                     dateOfRegistration: new Date(),
                     costOfTraining: 15000                       
                 },
                 {
                     username:'Niel',
                     courseSelected:'BackboneJS',
                     levelOfTraining:'Intermediate',
                     dateOfRegistration: new Date(),
                     costOfTraining: 23000                       
                 },
                 {
                     username:'Jasmine',
                     courseSelected:'HTML',
                     levelOfTraining:'Basic',
                     dateOfRegistration: new Date(),
                     costOfTraining: 3000                        
                 },
                 {
                     username:'Daniel',
                     courseSelected:'CSS3',
                     dateOfRegistration: new Date(),
                     levelOfTraining:'Advanced',
                     costOfTraining: 10000                       
                 }
                 ];

 }]);

Answer 1

Here is a working plunkr。由于您尚未共享控制台日志，因此我猜您可以在那里找到您的问题

我修复了controllers.controller('registerReportCtrl',['$scope', function($scope){。

检查并告诉我，因为我没有更改任何代码

Answer 2

使用ng-bind代替角度表达式{{}}。

Angular表达式未被浏览器评估

2 个答案: