AngularJS：为什么 Angular 不绑定在 ng-view 之外的菜单中过滤的单词？

Question

我在 Angular 中有一个新问题，我有一个菜单和一个 nview。在菜单中，我有典型的选项和一个输入和过滤器按钮。菜单在 ng div 之外。将为菜单搜索者过滤的视图加载表。

作为示例的索引代码是：

<div class="capa">    
    <table class="table table-striped">
        <tr>            
            <td colspan="6" style="background-color: white !Important; border: 0;padding:0px;">
                <div ng-include="url" ng-controller="ProductDetailController" ng-init="item = data"></div>
            </td>
        </tr>
        <td class="TableControler" colspan="6">
            <button ng-click="Add();" class="btn btn-primary">
              <i class="icon-user icon-white"></i> Añadir
            </button>
        </td>
        <tr>
            <th>Id</th>
            <th>Nombre</th>
            <th>Categoría</th>
            <th>Precio</th>
            <th></th>
            <th></th>

        </tr>
        <tr ng-repeat="product in products | filter: dataService.Palabra" >
            <td><a ng-click="getproduct(product.Id);">{{product.Id}}</a></td>
            <td>{{product.Name}}</td>
            <td class="remarcar">{{product.Category}}</td>
            <td><a ng-click="testprice(product.Id, product.Price);">{{product.Price}}</a></td>
            <td class="td_img mano"><img src="../../../Content/Img/General/lapiz.png" ng-click="Editar(product.Id);" /></td>
            <td class="td_img mano"><img src="../../../Content/Img/General/trash.png" ng-click="Borrar(product.Id);" /></td>
        </tr>
    </table>
</div>

菜单代码为：

<nav class="navbar navbar-default" role="navigation">
  <!-- El logotipo y el icono que despliega el menú se agrupan
       para mostrarlos mejor en los dispositivos móviles -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse"
            data-target=".navbar-ex1-collapse">
      <span class="sr-only">Desplegar navegación</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Logotipo</a>
  </div>

  <!-- Agrupar los enlaces de navegación, los formularios y cualquier
       otro elemento que se pueda ocultar al minimizar la barra -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="/menu1" class="dropdown-toggle" data-toggle="dropdown">
          Productos <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a ng-href="index.html#/menu{{getMenu(1)}}">Remarcar Nombre</a></li>
          <li><a ng-href="index.html#/menu{{getMenu(2)}}">Remarcar Categoria</a></li>
          <li><a href="index.html#/menu{{getMenu(3)}}">Remarcar Precio</a></li>          
          <li class="divider"></li>
          <li><a ng-href="index.html#/menu{{getMenu(4)}}">Sin Marcas</a></li>
        </ul>
      </li>
    </ul>

    <div class="navbar-form navbar-left" >
      <div class="form-group">
        <input type="text" class="form-control" ng-model="palabra" placeholder="Poner Palabras">
      </div>
      <button ng-click="Filtrar(palabra)" class="btn btn-default">Filtrar</button>
      <button ng-click="Todos()" class="btn btn-primary">Ver Todos</button>
    </div>
  </div>
</nav>

控制器是：

angular.module('productsApp').controller('ProductController', 
    ['$scope', 'dataService', '$location', function ($scope, dataService, $location) {
        $scope.data;
        $scope.visibility = true;
        $scope.menu = "/index.html#/menu4";
        $scope.palabra = "";
        $scope.products = dataService.Palabra;


        $scope.Filtrar = function (palabra) {
            dataService.Palabra = palabra;

            alert(dataService.Palabra);
            dataService.Filtrar(palabra).success(function (resp) {
                $location.path('/menu2').search({dato: JSON.stringify(resp[0].data)});
            });
        }
    }]);

app.js is:

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

app.config(['$routeProvider', function ($routeProvider)
{
    $routeProvide.
        when('/menu1', {
            controller: 'ProductController',
            templateUrl: '/Scripts/App/Html/ProductList1.html'
        }).
        when('/menu2', {
            controller: 'ProductController',
            templateUrl: '/Scripts/App/Html/ProductList2.html'
        }).
        when('/menu3', {
            controller: 'ProductController',
            templateUrl: '/Scripts/App/Html/ProductList3.html'
        }).
        otherwise({ redirectTo: '/' });
}]);

当我单击 Filtrar 时，未在 Partial 中分配 palabra，它有一个过滤了 ng-repeat 的表。模板显示palabra。

模板是：

{{palabra}}
<div class="capa">

    <table class="table table-striped">
        <tr>            
            <td colspan="6" style="background-color: white !Important; border: 0;padding:0px;">
                <div ng-include="url" ng-controller="ProductDetailController" ng-init="item = data"></div>
            </td>
        </tr>
        <td class="TableControler" colspan="6">
            <button ng-click="Add();" class="btn btn-primary">
              <i class="icon-user icon-white"></i> Añadir
            </button>
        </td>
        <tr>
            <th>Id</th>
            <th>Nombre</th>
            <th>Categoría</th>
            <th>Precio</th>
            <th></th>
            <th></th>

        </tr>
        <tr ng-repeat="product in products | filter: dataService.Palabra" >
            <td><a ng-click="getproduct(product.Id);">{{product.Id}}</a></td>
            <td>{{product.Name}}</td>
            <td class="remarcar">{{product.Category}}</td>
            <td><a ng-click="testprice(product.Id, product.Price);">{{product.Price}}</a></td>
            <td class="td_img mano"><img src="../../../Content/Img/General/lapiz.png" ng-click="Editar(product.Id);" /></td>
            <td class="td_img mano"><img src="../../../Content/Img/General/trash.png" ng-click="Borrar(product.Id);" /></td>
        </tr>
    </table>
</div>

为什么angular没有绑定filter这个词？我需要添加什么才能在 ng-view 中显示在 ng-include 中过滤的单词？

点击后我看到的是过滤器中没有任何操作。

Answer 1

几个小时后我找到了解决方案

在控制器内部我添加了$scope.word;

函数索引里面，ng-view后面我加了ng-init="word:palabra"

在部分列表中，我将转发器中的 palabra 更改为 word。

随着这些变化的工作。