angular controller-directive data binding - bind property inside object

I have two properties in my scope name and city.

If I change city, it reflects in directive. But when I change name, it is not reflecting in directive. I have intentionally passed name from obj object because I am trying to achieve data binding inside object.

Can some one please help how to bind property inside a object, so that the data binding still works.

I think this is where something must be wrong $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>

Answers


I took your code and added a $scope.$watch to it to update the model $scope.obj on change of $scope.name, works fine now. `

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

`


Your $scope.obj.prop is binding to a string on another object namely $scope

Your directive will not be notified of the change as the two way binding needs to be done on the property itself.

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>

If you really want to use your structure you can use $watch as Pramit Kundu showed in his answer, OR you can use a function to get the value.

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>

I think we tend to use $scope.$watch when we are not supposed to seeing that we can overcome the issue by binding correctly to scope or to use a function


Need Your Help

How can I build a small operating system on an old desktop computer?

c operating-system bootstrapping osdev assembly

This might be in vain, as I know writing an operating system is unbearably complicated (especially by oneself).

Is there a way to let Applescript type what you say?

macos applescript speech

I think I'm not doing this right, this is what I have...