CODEWITHSUNDEEP
javascriptangularjs
Firze
Firze

Reputation: 4049

How to pass model to a directive in Angular.js?

I am trying to figure out how I could create a two-way binding between my directive and repeater. I have been trying all kinds of things I have found on the internet. This is what I have right now, but it doesn't pass item.myDate to the template where it would be needed.

How is this supposed to be done?

HTML

<tr ng-repeat="item in items">          
    <td>
        <mydirective dateModel="item.myDate"></mydirective>
    </td>
</tr>

JS 

app.directive("mydirective", function(){
   return {
      restrict:'E',
      scope:{dateModel: "&"},
      template:'<input class="date" ng-model="{{dateModel}}">',
   };
});

Upvotes: 0

Views: 239

Answers (5)

road2victory
road2victory

Reputation: 496

Please go through this and one of the good read on same context. You will get clear idea on what you are missing currently.!! This is a good example showing you the difference 

 <div ng-controller="MyCtrl">
  <h2>Parent Scope</h2>
  <input ng-model="foo"> <i>// Update to see how parent scope interacts with  
   component scope</i>    
   <!-- attribute-foo binds to a DOM attribute which is always a string. 
     That is why we are wrapping it in curly braces so
     that it can be interpolated. -->
   <my-component attribute-foo="{{foo}}" binding-foo="foo"
    isolated-expression-foo="updateFoo(newFoo)" >
    <h2>Attribute</h2>
    <div>
        <strong>get:</strong> {{isolatedAttributeFoo}}
    </div>
    <div>
        <strong>set:</strong> <input ng-model="isolatedAttributeFoo">
        <i>// This does not update the parent scope.</i>
    </div>
    <h2>Binding</h2>
    <div>
        <strong>get:</strong> {{isolatedBindingFoo}}
    </div>
    <div>
        <strong>set:</strong> <input ng-model="isolatedBindingFoo">
        <i>// This does update the parent scope.</i>
    </div>
    <h2>Expression</h2>    
    <div>
        <input ng-model="isolatedFoo">
        <button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>
        <i>// And this calls a function on the parent scope.</i>
    </div>
  </my-component>
 </div>



  var myModule = angular.module('myModule', [])
  .directive('myComponent', function () {
    return {
        restrict:'E',
        scope:{
            /* NOTE: Normally I would set my attributes and bindings
            to be the same name but I wanted to delineate between
            parent and isolated scope. */                
            isolatedAttributeFoo:'@attributeFoo',
            isolatedBindingFoo:'=bindingFoo',
            isolatedExpressionFoo:'&'
        }        
    };
   })
   .controller('MyCtrl', ['$scope', function ($scope) {
    $scope.foo = 'Hello!';
    $scope.updateFoo = function (newFoo) {
        $scope.foo = newFoo;
    }
}]);

Upvotes: 0

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15290

Do this changes.

1.

<mydirective date-model="item.myDate"></mydirective>

2.

app.directive("mydirective", function(){
   return {
      restrict:'E',
      scope:{dateModel: "="},
      template:'<input class="date" ng-model="dateModel">',
   };
});

Please refer Plunker

Upvotes: 2

Alin Pandichi
Alin Pandichi

Reputation: 955

It should be:

app.directive("mydirective", function(){
   return {
      restrict:'E',
      scope:{dateModel: '@'},
      template:'<input class="date" ng-model="dateModel">',
   };
});

If you want your directive to use a different name (e.g. myDate) than the one used in your directive template, it should be something like this:

HTML

<tr ng-repeat="item in items">          
    <td>
        <mydirective myDate="item.myDate"></mydirective>
    </td>
</tr>

JS

app.directive("mydirective", function(){
   return {
      restrict:'E',
      scope:{dateModel: '@myDate'},
      template:'<input class="date" ng-model="dateModel">',
   };
});

Upvotes: 0

Deepak saini
Deepak saini

Reputation: 4270

app.directive("mydirective", function(){
   return {
      restrict:'E',
      scope:{dateModel: '='},// Here you have to change in your code
      template:'<input class="date" ng-model="{{dateModel}}">',
   };
});

Upvotes: 1

user1123951
user1123951

Reputation: 1

change to this will work : scope:{dateModel: "="}.

Upvotes: 0

Related Questions