角度控制器指令數據綁定-對象內部的綁定屬性

Question

我的作用域名稱和城市有兩個屬性。

如果我改變城市，它會反映在指令中。 但是當我更改名稱時，它並沒有反映在指令中。 我有意從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> 

Answer 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
    );
});

`

Answer 2

您的$scope.obj.prop綁定到另一個對象（即$scope上的字符串

由於需要對屬性本身進行雙向綁定，因此不會將更改通知您的指令。

范例 ：

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昆都表現出了他的答案， 或者您可以使用函數來獲取值。

例子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來克服此問題