Angularjs 控制器和指令之间的双向绑定，控制器中的$watch不起作用

我遇到过很多类似的问题，都试过了，但都没有成功。我不确定我是否以“角度”的方式来做这件事，所以我可能需要改变我的方法。简而言之，我在控制器中初始化一个作用域变量，然后该变量与指令的作用域共享。但是，当此值作为用户交互的一部分更改时，新值不会与控制器变量同步。我的缩写代码如下：

控制器 $watch方法仅在页面加载时调用一次

.controller('NewTripCtrl', ['$scope', function($scope) {
  $scope.pickupLocation;
  $scope.dropoffLocation;

  $scope.$watch('dropoffLocation', function(oldVal, newVal) {
    console.log('dropofflocation has changed.');  
    console.log(oldVal);
    console.log(newVal);
  });
}])

HTML

指示 角度模块（'ion-google-place'，[]） .指令（'ionGooglePlace'[ “$ionicTemplateLoader”， “$IonicBackground”， “$q”， “$timeout”， “$rootScope”， “$document”， 函数（$ionicTemplateLoader、$IonicBackground、$q、$timeout、$rootScope、$document）{ 返回{ 限制：“A”， 范围：{ 位置：'=位置' }, 链接：函数（范围、元素、属性）{ scope.locations=[]； console.log（'init'）； console.log（范围）； 控制台日志（attrs）； //var geocoder=new google.maps.geocoder（）； var placesService=new google.maps.places.autocompletesservice（）； var searchEventTimeout=未定义； var\u TPL=[ '', '', '', '', '', '', '', “取消”， '', '', '', '', '', “{l.formatted_address | | l.description}}”， '', '', '', '' ].加入（“”）； var pouppromise=$ionicTemplateLoader.compile({ 模板：弹出式\u TPL， 范围:范围,， 附录：$document[0]。正文 }); POUPPROMISE.then（函数（el）{ var searchInputElement=angular.element（el.element.find（'input'））； //用户选择地点服务预测后，返回 //转到Places服务并获取所选位置的详细信息。 //或者如果使用地理编码服务，我们只需通过 scope.getDetails=函数（选择）{ //log（'getDetails'）； var deferred=$q.deferred（）； 如果（attrs.service！=='places'）{ 延迟。解决（选择）； }否则{ var placesService=new google.maps.places.placesService（元素[0]）； placesService.getDetails({ “placeId”：selection.place\u id }, 功能（placeDetails、placeServiceStatus）{ 如果（placesServiceStatus==“确定”）{ 延迟。解决（详细信息）； }否则{ 延迟。拒绝（PlacesService状态）； } }); } 回报。承诺； }; //用户选择地点“预测”或地理编码结果 //做一些选择 scope.selectLocation=功能（选择）{ //如果使用Places服务，我们需要返回该服务以获取 //这个地方的细节。 var promise=scope.getDetails（选择）； 承诺。然后（onResolve、onReject、onUpdate）； css（'display'，'none'）； $IonicBackground.release（）； }; 函数onResolve（详细信息）{ log（'ion-google-place.onResolve'）； scope.location=详细信息； $timeout（函数（）{ //你想要的任何东西都可以放在这里，并将在下一个摘要中安全运行。 作用域：$apply（）； }) 如果（！scope.location）{ 元素val（“”）； }否则{ element.val（scope.location.formatted|u address | |“”）； } } //更多代码。。。 }; } ]); $watch函数仅在页面加载时检测到更改，但不会再次检测。向控制器提供用户在指令输入元素中输入的值的正确方法是什么？

以下是您的选项

选项#1使用ng型号 在父控制器中具有监视功能

<input ion-google-place type="text" class="ion-google-place" autocomplete="off" service="places" placeholder="Dropoff Address" ng-model="dropoffLocation"></input>

你不需要在这里观看

选项#2到对象文字

.controller('NewTripCtrl', ['$scope', function($scope) {

 $scope.locationChanged = function(location){
    //you watch code goes here
 }

}



 <input ion-google-place type="text" class="ion-google-place" autocomplete="off" service="places" placeholder="Dropoff Address" location="dropoffLocation" location-changed="locationChanged(location)" ></input>

//在链接函数中，调用父控制器方法作为

scope.locationChanged({location:scope.location});  

选项#3通过功能参考

controllect和指令范围与选项2相同

//在链接函数中，调用父控制器方法作为
scope.locationChanged（）（scope.location）；

建议使用选项2以提高可读性

应尽可能避免观察变量。

如所述：

作用域继承通常很简单，您甚至不需要知道它正在发生……直到您尝试从子作用域内部将双向数据绑定（即表单元素、ng模型）到父作用域上定义的基元（例如数字、字符串、布尔值）为止

使用基元执行双向数据绑定时，这是一个常见问题。请尝试执行相同的操作，但尝试共享对象而不是基元

i、 e:

---

你有scope.location，在tpl中是ng repeatGood shout中的另一个位置，但我已将其更新为另一个名称，$watch仍然没有启动。你可以为此创建一个提琴，或者尝试使用

匿名函数
。
$scope.$watch（function（）{return$scope.dropoffLocation}，function（）{}）
…可能会有帮助。Legend。我已经让它工作了，但我必须观看“pickupLocation.location”。是否要对对象字段/属性进行更改以达到对象级别？抱歉
scope: {
          location: '=ngModel'
        },

.controller('NewTripCtrl', ['$scope', function($scope) {

 $scope.locationChanged = function(location){
    //you watch code goes here
 }

}



 <input ion-google-place type="text" class="ion-google-place" autocomplete="off" service="places" placeholder="Dropoff Address" location="dropoffLocation" location-changed="locationChanged(location)" ></input>

scope: {
          location: '=',
      locationChanged: '&'
        }

scope.locationChanged({location:scope.location});  

<input ion-google-place type="text" class="ion-google-place" autocomplete="off" service="places" placeholder="Dropoff Address" location="dropoffLocation" location-changed="locationChanged" ></input>


//in link function invoke parent controllers method as 

scope.locationChanged()(scope.location);  

.controller('NewTripCtrl', ['$scope', function($scope) {
    $scope.pickupLocation = {location: ''};
    $scope.dropoffLocation = {location: ''};
    ...