0
Добрый день!Директива не работает - Угловая JS
Я новичок в 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> -->
Спасибо!
Что означает «не работает», точно? Первое, что выделяется для меня, это то, что вы, похоже, используете синтаксис '$ scope', но объявляете свой контроллер с помощью синтаксиса ControllerAs (' SearchController as search'). – Claies
Я попытался воспроизвести ваш код, и я не вижу ничего плохого. http://plnkr.co/edit/Btw4g9YDOMvnIoJZUtki?p=preview. Можете ли вы рассказать о том, с чем вы столкнулись? – Claies
Вы добавили 'ng-app =" searchApp "' к вам код? Во-вторых, если вы используете $ scope, вам не следует использовать синтаксис ControllerAs '' SearchController as search ''и просто' 'SearchController'' – locnguyen