如何手動將值傳遞給AngularJS中的指令的父範圍？

我AngularJS預輸入FaveDirective需要綁定一個值給父範圍，並調用更新功能時，該值的變化：如何手動將值傳遞給AngularJS中的指令的父範圍？

父HTML：

<div class="parent-controller-scope ng-scope"> 
    <my-fave-picker favorite="parent.favorite" on-change="parent.update()"> 
</div>

最喜歡選擇器指令模板：

<input 
    type="text" 
    ng-model="vm.favorite" 
    typeahead-on-select="vm.onChange()" 
    ng-init="vm.loadTypeaheadValues()" 
    placeholder="Pick your favorite Swift" 
    uib-typeahead="name for name in ::vm.TypeaheadValues | filter:$viewValue" 
    class="form-control">

Fave picker指令碼：

(function (angular, _) { 
    'use strict'; 

    angular 
     .module('favorite') 
     .directive('MyFavePicker', function() { 
      return { 
       restrict: 'E', 
       templateUrl: 'fave-picker-template.html', 
       scope: { 
        favorite: '=', 
        onChange: '&' 
       }, 
       controllerAs: 'vm', 
       bindToController: true, 
       controller: 'FavePickerController' 
      }; 
     }) 
     .controller('FavePickerController', function() { 
      // etc. 
     }); 

}(angular, _));

這工作幾乎正確;當提前輸入時，它按照預期在父範圍上調用update()。問題是這發生在之前favorite的最新值被傳播到父範圍。換句話說，如果預輸入有可能的值["Taylor Swift", "Jonathan Swift"]和I型「泰」，然後按回車鍵選擇從下拉列表中的值，然後在一次執行typeahead-on-select回調，我有以下值：

vm.favorite = "Taylor Swift"  
parent.favorite = "Tay"

因此parent.update()功能的錯誤值爲parent.favorite（「Tay」而不是「Taylor Swift」）。

我能想到的一些不好的方式，但什麼是做到這一點，這樣的變化vm.favorite被傳播回之前父範圍調用parent.favorite()的正確方法？

注意下面的事情是不可能在我的情況：

繼承父範圍，而不是使用隔離範圍

傳遞favorite作爲參數傳遞給update（on-change="parent.update(favorite)"）

設定超時dir.onChange()致電之前parent.update()

來源

2017-10-09 Sasgorilla

你提到角（又名角2和4），你用AngularJS（又名角的1.x）標籤。哪一個？ – DanteTheSmith

根據顯示的代碼，它似乎是AngularJS – lealceldeiro

對不起，這是AngularJS（1.x）。更新了問題。 – Sasgorilla

避免使用雙向，'='，在組件中綁定以傳播值。代替使用單向，'<'，用於輸入和表達，'&'結合，用於輸出的結合：

<my-fave-picker favorite="parent.favorite" 
    on-change="parent.favorite=$value; parent.update($value)"> 
</my-fave-picker>

app.directive('MyFavePicker', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'fave-picker-template.html', 
     scope: { 
      ̶f̶a̶v̶o̶r̶i̶t̶e̶:̶ ̶'̶=̶'̶,̶ 
      favorite: '<', 
      onChange: '&' 
     }, 
     controllerAs: 'vm', 
     bindToController: true, 
     controller: 'FavePickerController' 
    }; 
})

在分量模板：

<input 
    type="text" 
    ng-model="vm.favorite" 
    ng-change="vm.onChange({$value: vm.favorite})" 
    typeahead-on-select="vm.onChange({$value: vm.favorite})" 
    ng-init="vm.loadTypeaheadValues()" 
    placeholder="Pick your favorite Swift" 
    uib-typeahead="name for name in ::vm.TypeaheadValues | filter:$viewValue" 
    class="form-control" 
/>

通過在施加所述值表達式，'&'，綁定，該值立即傳播。使用雙向綁定，該值在摘要循環後傳播。

欲瞭解更多信息，請參閱

來源

2017-10-09 16:36:12 georgeawg

如何手動將值傳遞給AngularJS中的指令的父範圍？

回答

相關問題