我可能在使用 ui.router 的继承范围方面遇到问题。我正在创建一个小型应用程序，例如地址簿。我想在导航栏中有一个输入，它允许我过滤其他页面上的地址(所以当我在那里编写时，部分 View 应该由 ui-router 更改)。我有一个名为 index.html 的 View ，以及使用 ui-ruter 的每个站点的其他小程序。
当我在输入中写入时， View 正在改变，但数据没有被过滤。我没有收到任何错误。感谢您的回答。 (抱歉，描述很复杂，这是我的第一篇文章)
index.html(不带链接的 header )
<body ng-app="appModule" ng-controller="applicationController">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Contact Manger</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li><a ui-sref="index">View</a></li>
<li><a ui-sref="add">Add Contact</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search" ng-model="search" ng-keyup="startSearch()">
</form>
</div>
</nav>
<div class="container">
<ui-view>
</ui-view>
</div>
appModule.js
angular.module("appModule",[
"ui.router",
"AddModule",
"DetailsModule",
"MainModule",
"ngSanitize"])
appController.js
angular.module("appModule")
.controller('applicationController', function($scope, $location){
$scope.startSearch = function(){
$location.path('index');
};
});
路由器.js
angular.module('appModule')
.config(function($stateProvider){
$stateProvider.state('index',{
url: '/index',
template: "<main-component></main-component>"
})
.state('add',{
url: '/add',
template: "<add-component></add-component>"
})
.state('contact-details',{
url: '/details/:id',
template: "<details-component></details-component>",
})
})
mainController.js(位于其他模块中)
(function () {
function MainController($scope, contactFactory) {
$scope.contacts = contactFactory.get();
}
angular.module("MainModule")
.component("mainComponent", {
templateUrl: "/assets/partials/main.html",
controller: ["$scope", "contactFactory", MainController],
})
})()
ui-router 模板中的一半代码:
<tbody>
<tr ng-repeat="contact in contacts | filter:search">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.phone}}</td>
<td><a ui-sref="contact-details({id:$index})" class="btn btn-default btn-xs">More..</a></td>
</tr>
</tbody>
最佳答案
您可能知道，$scope 具有原型(prototype)继承，您可以将代码更改为如下所示:
只需将 search 分配给范围内对象的属性，如下所示；
$scope.data = {};
$scope.data.search = '';
您的输入更改为:
<input type="text" class="form-control" placeholder="Search" ng-model="data.search" ng-keyup="startSearch()">
最后你的内部组件变成这样:
<tr ng-repeat="contact in contacts | filter:data.search">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.phone}}</td>
<td><a ui-sref="contact-details({id:$index})" class="btn btn-default btn-xs">More..</a></td>
</tr>
Here Misko 更深入地讨论了这个问题。
关于javascript - 使用 ui.router 过滤 ng-repeat 中的数据的继承范围 [Angular1.5]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42055770/