指令不起作用 - Angular JS

Question

美好的一天！

我是 Angular JS 的新手，目前正在尝试创建一个非常简单的应用程序。

我想拆分我的 index.html 以便我的代码不会太拥挤。我已经按照说明完成了，但它仍然无法正常工作，并且过去两天一直在盯着它。

这是我的 index.html

<div class="container" ng-controller="SearchController as search">
    <h1>SEARCH</h1>

    <div class="col-md-12 column">
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <search-template class="panel-body">

            </search-template>
        </div>
    </div>

    <div class="col-md-2">
        <div class="input-group" >
            <div class="input-group-addon">
                <table>
                    <tr ng-repeat="recordContent in record | unique:'country'">
                        <td>
                            <input type="checkbox" ng-model="usedCountry[$index]" aria-label="">
                            {{recordContent.country}}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-10 column">
        <div>
            <table class="table">
                <tr>
                    <th>#</th>
                    <th>NAME</th>
                    <th>CITY</th>
                    <th>COUNTRY</th>
                </tr>
                <tr ng-repeat="personRecord in record | filter:searchInput">
                    <td>{{$index + 1}}</td>
                    <td ng-bind-html="personRecord.name | highlight:searchInput" >{{personRecord.name}}</td>
                    <td ng-bind-html="personRecord.city | highlight:searchInput">{{personRecord.city}}</td>
                    <td ng-bind-html="personRecord.country | highlight:searchInput">{{personRecord.country}}</td>
                </tr>
            </table>
        </div>
        <button class="btn btn-default" ng-click="ShowHide()">Add Record</button>
        <div ng-show="IsVisible">
            <div class="panel panel-default">
                <div class="panel-body">
                    <form name="addRecordForm" class="navbar-form navbar-left" ng-submit="AddRow()">
                        <table class="table">
                            <tr>
                                <td>#</td>
                                <td><input type="text" name="name" placeholder="Name" class="form-control" ng-model="name"></td>
                                <td><input type="text" name="city" placeholder="City" class="form-control" ng-model="city"></td>
                                <td><input type="text" name="country" placeholder="Country" class="form-control" ng-model="country"></td>
                                <td><button type="submit" class="btn btn-default">Submit</button></td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的 app.js

"use strict";

var app = angular.module('searchApp', []);

app.controller('SearchController', function($scope) {

    $scope.record = [
        {
            name: 'Alfreds Futterkiste',
            city: 'Berlin',
            country: 'Germany'
        },
        {
            name: 'Ana Trujillo Emparedados y helados',
            city: 'Mexico D.F.',
            country: 'Mexico'
        },
        {
            name: 'Antonio Moreno Taquería',
            city: 'Mexico D.F.',
            country: 'Mexico'
        },
        {
            name: 'Around the Horn',
            city: 'London',
            country: 'United Kingdom'
        },
        {
            name: 'Bahiyah Omar Talib',
            city: 'Singapore',
            country: 'Singapore'
        },
        {
            name: 'Beverages',
            city: 'London',
            country: 'United Kingdom'
        },
        {
            name: 'Hanan Abud',
            city: 'Batu Pahat',
            country: 'Malaysia'
        },
        {
            name: 'Harry Styles',
            city: 'London',
            country: 'United Kingdom'
        },
        {
            name: 'Liam Payne',
            city: 'London',
            country: 'United Kingdom'
        },
        {
            name: 'Louis Tomlinson',
            city: 'London',
            country: 'United Kingdom'
        },
        {
            name: 'Niall James Horan',
            city: 'Dublin',
            country: 'Ireland'
        }
    ];

    $scope.IsVisible = false;
    $scope.usedCountry = [];

    $scope.ShowHide = function () {
        //If DIV is visible it will be hidden and vice versa.
        $scope.IsVisible = $scope.IsVisible ? false : true;
    };

    $scope.AddRow = function() {
        $scope.record.push({'name':$scope.name, 'city':$scope.city, 'country':$scope.country});
    };

    $scope.filterCountry = function(){
        return function(p){
            for(var i in $scope.usedCountry){
                if(p.country == $scope.group[i] && $scope.usedCountry[i]){
                    return true;
                }
            }
        }
    };
});

app.controller('RecordController', function($scope){
    $scope.record = {};
});

// Function: Highlight filter
app.filter('highlight', function ($sce) {
    return function (record, phrase) {
        if (phrase) record = record.replace(new RegExp('(' + phrase + ')', 'gi'),
            '<span class="highlighted">$1</span>')
        return $sce.trustAsHtml(record)
    };
});

app.filter('unique', function() {
    return function(collection, keyname) {
        var output = [],
            keys = [];

        angular.forEach(collection, function(item) {
            var key = item[keyname];
            if(keys.indexOf(key) === -1) {
                keys.push(key);
                output.push(item);
            }
        });
        return output;
    };
});

app.filter('count', function() {
    return function(collection, key) {
        var out = "test";
        for (var i = 0; i < collection.length; i++) {
            //console.log(collection[i].pants);
            //var out = myApp.filter('filter')(collection[i].pants, "42", true);
        }
        return out;
    }
});

app.directive('searchTemplate', function(){
    return {
        restrict: 'E',
        templateUrl: 'searchTemplate.html'
    };
});

这是 searchTemplate.html

<form class="navbar-form navbar-left" role="search">
<div class="form-group">
    <input type="text" class="form-control" placeholder="Search" ng-model="searchInput">
</div>
<!-- <button type="submit" class="btn btn-default">Submit</button> -->

谢谢！

Answer 1

您以错误的方式声明$scope（当然不是最好的方式）。

app.controller('SearchController', ['$scope',function($scope) {}]);

更好的方法。 Reference

Answer 2

我发现我的代码没有错误。显然它与浏览器有关。我使用 Chrome 查看文件。

Chrome 不允许从其他文件访问文件。因为，我已将应用程序分成几个 HTML 文件，这就是为什么我无法查看分离的 .html 文件。

为了解决这个问题，我使用以下命令通过命令提示符打开 Chrome： chrome.exe --allow-file-access-from-files。

谢谢。