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就是總是調用而沒有任何參數，不管是什麼。