Javascript 在指令中调用控制器函数_Javascript_Angularjs

Javascript 在指令中调用控制器函数

javascript angularjs

Javascript 在指令中调用控制器函数,javascript,angularjs,Javascript,Angularjs,我试图从自定义指令调用控制器上的回调。我的目标是生成一个可以在多个位置重复使用的搜索指令。我想通过指令属性中指定的函数向它传递它需要在连接的控制器上调用的函数 Plunkr URL是代码如下 <html ng-app="demo"> <head> <title>My Angular App</title> <link data-require="bootstrap@*" data-semver="3.3.1" rel="st

我试图从自定义指令调用控制器上的回调。我的目标是生成一个可以在多个位置重复使用的搜索指令。我想通过指令属性中指定的函数向它传递它需要在连接的控制器上调用的函数

Plunkr URL是

代码如下

<html ng-app="demo">

<head>
   <title>My Angular App</title>
   <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
   <script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
   <script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller='carsController'>
  <search-box placeholder="Search Cars" do-search="doSearch()"></search-box>
  <!--
  <form class="form-inline">
    <div class="form-group">
      <input type="text" class="form-control" ng-model="searchText" placeholder="Search Cars" />
    </div>
    <button type="button" class="btn btn-default" ng-click="doSearch()">search</button>    
  </form>
  -->
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Make</th>
        <th>Model</th>
      </tr>
    </thead>
    <tbody ng-repeat="car in cars">
      <tr>
        <td>{{car.make}}</td>
        <td>{{car.model}}</td>
      </tr>
    </tbody>
  </table>
</div>
</body>


搜寻

我是一个ng noob，并且已经多次阅读了文档。不用说，ng指令仍然是个谜

感谢您的帮助

您的代码的问题与controller doSearch方法无关。单击搜索按钮时，我可以看到控制器方法被成功调用

问题在于控制器作用域属性

searchText

。理想情况下，当您更改搜索文本时，应该设置此属性

我稍微修改了代码，将

searchText

传递给指令，并将搜索框输入设置为ng模型

请参见

您的代码有几处错误。我把它们固定在一个盒子里

未绑定搜索文本您依赖于

$scope.searchText

作为用户在筛选器文本框中输入的文本，但没有绑定到任何位置。相反，在我的版本中，我选择使

searchText

参数可用于

do search=“doSearch（searchText）”

属性表达式。这意味着控制器上的

doSearch

功能变为：

$scope.doSearch = function(searchText) {
  // make sure its a string and lowercased
  searchText = (searchText || '').toString().toLocaleLowerCase();
  if (searchText.length > 0) {
    $scope.cars = [];
    $scope._cars.forEach(function(car, index) {
      if (car.make.toLocaleLowerCase().indexOf(searchText) > -1) {
        $scope.cars.push(car);
      }
    });
  } else {
    $scope.cars = $scope._cars;
  }
}

您会注意到，我还使用了（实际上与unicode/funky字符相同，但理论上更好地处理unicode/funky字符）来确保进行了不区分大小写的搜索

其他轻微改善

我在模板中为您的指令添加了

ng submit=“search（）”

，以便用户可以按Enter键应用筛选。

特别感谢@GregL的建议。toLocaleLowerCase（）相关查询。我可以从2层深度指令调用控制器方法吗？我不知道你的意思。请你发布一个新的问题，尽可能多的细节，让我明白你的意思？

<form class="form-inline">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="{{placeholder}}" />
    <button type="button" class="btn btn-default" ng-click="search()">
      Search
    </button>
 </div>
</form>

$scope.doSearch = function(searchText) {
  // make sure its a string and lowercased
  searchText = (searchText || '').toString().toLocaleLowerCase();
  if (searchText.length > 0) {
    $scope.cars = [];
    $scope._cars.forEach(function(car, index) {
      if (car.make.toLocaleLowerCase().indexOf(searchText) > -1) {
        $scope.cars.push(car);
      }
    });
  } else {
    $scope.cars = $scope._cars;
  }
}