Angular指令：用＆符号方法将值传递给控制器​​

Question

我试图围绕Angular指令与隔离作用域并与控制器进行通信。

我想创建的是一个简单的可重用搜索组件。这个组件有一个模型值（查询），并且应该有一些方法来向控制器指示搜索按钮被点击。

的index.html看起来是这样的：

<searchbox 
    ng-model="query" 
    on-search="search()" 
></searchbox> 

<p>Current search query: {{query}}</p> 

的<searchbox>指令如下：

app.directive('searchbox', function() { 
    return { 
     link : function(scope) { 
      scope.submit = function() { 
       console.log('Trying to return the query ' + scope.q); 
       scope.onSearch(scope.q); 
      } 
     }, 
     replace : true, 
     restrict : 'E', 
     scope : { 
      'ngModel' : '=q', 
      'onSearch' : '&' 
     }, 
     template : ''.concat(
      '<form><input ng-model="q" type="text" />', 
      '<input type="submit" value="Search" ng-click="submit()" />', 
      '</form>' 
     ) 
    }; 
}); 

和主控制器是这样的：

app.controller('AppCtrl', function($scope) { 
    $scope.search = function(query) { 
     alert('You searched for ' + query); 
     alert('Search value: ' + $scope.query); 
    } 
}); 

不幸的是，查询确实不会出现在控制器中，因此o f search回调，并作为$scope propery。

我已经谷歌了一下，但大多数的答案似乎使用$scope.$eval的一些变化，或直接调用控制器，这似乎有点像kludge。

一个Codepen上面的例子可以在这里找到：http://codepen.io/hay/pen/Avwjz

任何帮助将是非常赞赏。

Answer 1

两个问题在这里：

的范围定义为

'q' : '=ngModel', 

左侧是要在内部使用（你的模板使用q）的名称，右侧是名属性。

的HTML必须是

on-search="search(query)" 

与submit处理程序是

... 
scope.onSearch(); 

&意味着该表达式评估为是。如果表达式只是search()，那么search就是总是调用而没有任何参数，不管是什么。