角度控制器指令数据绑定 - 绑定对象内的属性答案

【问题标题】：angular controller-directive data binding - bind property inside object角度控制器指令数据绑定 - 绑定对象内的属性
【发布时间】：2015-12-04 08:32:31
【问题描述】：

我的范围名称和城市中有两个属性。

如果我改变城市，它会反映在指令中。但是当我更改名称时，它并没有反映在指令中。我故意从 obj 对象传递名称，因为我正在尝试实现对象内部的数据绑定。

有人可以帮助如何在对象内绑定属性，以便数据绑定仍然有效。

我认为这是一定有问题的地方 $scope.obj = { prop: $scope.name };

var myApp = angular.module('myApp',[]);

myApp.directive('passObject', function() {
    return {
        restrict: 'E',
        scope: { obj: '=', city: "=" },
        template: '<div>Hello, {{obj.prop}}! from {{city}}</div>'
    };
});

myApp.controller('MyCtrl', function ($scope) {
    $scope.name="manu";
  $scope.city = "hyderabad";
    $scope.obj = { prop: $scope.name };
});

<div ng-controller="MyCtrl">
  <h3>
    Name: <input ng-model="name"/> 
  </h3>
  <h3>
    City: <input ng-model="city"/>
  </h3>   
    <pass-object obj="obj" city="city"></pass-object>  
</div>

【问题讨论】：

标签： angularjs data-binding directive

【解决方案1】：

我获取了您的代码并添加了一个 $scope.$watch 以在 $scope.name 更改时更新模型 $scope.obj，现在可以正常工作了。 `

var myApp = angular.module('myApp',[]);

myApp.directive('passObject', function() {
    return {
        restrict: 'E',
        scope: { obj: '=', city: "=" },
        template: '<div>Hello, {{obj.prop}}! from {{city}}</div>'
    };
});

myApp.controller('MyCtrl', function ($scope) {
    $scope.name="manu";
    $scope.city = "hyderabad";
    $scope.obj = { prop: $scope.name };

    $scope.$watch(
      function(){
        return $scope.name;
      },
      function(newVal,oldVal){
        $scope.obj.prop = $scope.name;
      },
      true
    );
});

【讨论】：

【解决方案2】：

您的$scope.obj.prop 正在绑定到另一个对象上的字符串，即$scope

您的指令将不会收到更改通知，因为需要对属性本身进行双向绑定。

Example:

var myApp = angular.module('application',[]);

myApp.directive('passObject', function() {
    return {
        restrict: 'E',
        scope: { name: '=', city: "=" },
        template: '<div>Hello, {{name}}! from {{city}}</div>'
    };
});

myApp.controller('MyCtrl', function ($scope) {
    $scope.name="manu";
    $scope.city = "hyderabad";    
});

<div ng-controller="MyCtrl">
  <h3>
    Name: <input ng-model="name"/> 
  </h3>
  <h3>
    City: <input ng-model="city"/>
  </h3>   
  <pass-object name="name" city="city"></pass-object>  
</div>

如果你真的想使用你的结构，你可以使用$watch，正如 Pramit Kundu 在他的回答中所展示的那样，或者你可以使用函数来获取值。

Example 2

var myApp = angular.module('application',[]);

myApp.directive('passObject', function() {
    return {
        restrict: 'E',
        scope: { obj: '=', city: "=" },
        template: '<div>Hello, {{obj.prop()}}! from {{city}}</div>'
    };
});

myApp.controller('MyCtrl', function ($scope) {
    $scope.name="manu";
    $scope.city = "hyderabad";
    $scope.obj = { prop: function(){ return $scope.name; } };
});

<div ng-controller="MyCtrl">
   <h3>
    Name: <input ng-model="name"/> 
   </h3>
   <h3>
       City: <input ng-model="city"/>
   </h3>   
   <pass-object obj="obj" city="city"></pass-object>  
</div>

我认为我们倾向于使用$scope.$watch，因为我们不应该看到可以通过正确绑定到scope 或使用function 来解决问题

【讨论】：