How to pass object to directive through attribute in AngularJS?

Question

I want to pass object (reference - two way binding) through ATTRIBUTE not by isolated scope. How can I do this? Because code bellow passing string instead of object:

HTML

<tr ng-form="rowForm" myDirective="{{row.data}}">

Directive

angular.module("app").directive("myDirective", function () {
    return {
        require: ["^form"],
        restrict: "A",
        link: function (scope, element, attrs, ctrls) {
            scope.$watch(function () {
                return attrs.myDirective;
            }, function (newValue, oldValue) {
            // .....

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

Directives can do two-way data binding without parsing or compile anything manually, sorry for not delivering the plunker but it's rebelius and won't save for me

JS

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

app.controller('MainCtrl', function($scope) {
  $scope.myObj = {name: 'Tibro', age: 255}
})
.directive('myDirective', function(){
  return {
    scope: {
      'myAttribute': '='
    },
    template: '{{myAttribute}}',
    link: function(scope){
      scope.myAttribute.age= 31
    }
  }
})

HTML

  <body ng-controller="MainCtrl">
    controller: {{myObj}} <br/>
    directive: <my-directive my-attribute="myObj"></my-directive>
  </body>

OUTPUT

controller: {"name":"Tibro","age":31} 
directive: {"name":"Tibro","age":31}

you can see from the output that passed object has been binded two-way and change made in directive is reflected on controller level

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 27, 2016 at 11:51

maurycy

8,4201 gold badge30 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DiPix Over a year ago

Let's say I will deal with a isolate scope. In directive in part "link: {...}" I have a function scope.doSomthing. How can I run this function in html (ng-click) if scope is isolated?

maurycy Over a year ago

is the doSomething in the scope of directive or controller, what's your use case?

DiPix Over a year ago

Here: link: function(scope){ scope.doSomething = function() {...} } And I want to call it in html by ng-click="doSomething()". Before I added isolated scope: { } to directive, everything was working

maurycy Over a year ago

You can still do it template: '<button ng-click="doSomething()">do smth</button>'

DiPix Over a year ago

I have this button in HTML file, not in directive. And if i click on it, then nothing happens

Estus Flask · Accepted Answer · 2016-11-27 11:15:36Z

The result of {{ }} interpolation is a string. An object can't be passed like that.

Bindings are idiomatic here and thus preferable. The whole thing becomes messy when the directive is forced to use parent scope. However, it can be done by parsing scope properties manually with $parse:

  $scope.$watch(function () {
    var myDirectiveGetter = $parse($attrs.myDirective);
    return myDirectiveGetter($scope);
  }, ...);

This is a job for binding (< or =, depending on the case). If isolated scope isn't desirable, this can be done with inherited scope and bindToController:

scope: true,
bindToController: {
  myDirective: '<'
},
controllerAs: `vm`,
controller: function ($scope) {
  $scope.$watch('vm.myDirective', ...);
}

Notice that directive attribute is my-directive, not myDirective.

George Kagan · Accepted Answer · 2016-11-27 10:55:53Z

0

Couple of things:

myDirective in the tr should be my-directive, as per Angular's conventions.
{{row.data}} prints the variable, you need to pass it without the {{}} for it to go through as an object.

answered Nov 27, 2016 at 10:55

George Kagan

6,1448 gold badges50 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to pass object to directive through attribute in AngularJS?

3 Answers 3

JS

HTML

OUTPUT

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

JS

HTML

OUTPUT

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related