Question

我有一个问题，可能是使用ui.router的继承范围。我正在创建一个类似于地址簿的小应用程序。我希望在导航栏中输入一个允许我过滤其他页面上的地址的输入（所以当我在那里写时，应该通过ui-router更改parial视图）。我有一个名为index.html的视图和使用ui-ruter的每个站点的其他tamplets。

当我在输入中写入时，视图正在改变，但数据未被过滤。我没有收到任何错误。谢谢你的回答。（对不起复杂的描述，这是我的第一篇文章）

index.html（没有包含链接的标题）

<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');
    };
});

router.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>

Answer 1

您可能知道，+=具有原型继承，您可以将代码更改为以下内容：

只需将$scope分配给范围内对象的属性，就像这样;

search

您的输入更改为：

$scope.data = {};
$scope.data.search = '';

最后你的内部组件变成这样：

<input type="text" class="form-control" placeholder="Search" ng-model="data.search" ng-keyup="startSearch()">

Here Misko更深入地讨论了这个问题。

使用ui.router过滤ng-repeat中的数据的继承范围[Angular1.5]

1 个答案: