Как передать модель в директиву в Angular.js?

Question

Я пытаюсь выяснить, как я могу создать двустороннюю привязку между моей директивой и ретранслятором. Я пробовал все виды вещей, которые я нашел в Интернете. Это то, что у меня есть сейчас, но оно не передает item.myDate в шаблон, где это необходимо.

Как это должно быть сделано?

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}}">', 
    }; 
}); 

Answer 1

Делайте это изменения.

1.

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

2.

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

Пожалуйста, обратитесь Plunker

Answer 2

изменение это будет работать: объем: {dateModel: "="}.

Answer 3

Оно должно быть:

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

Если вы хотите, чтобы ваша директива использовать другое имя (например, MyDate), чем используемый в шаблоне директивы, это должно быть что-то вроде этого:

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">', 
    }; 
}); 

Answer 4

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

Answer 5

Перейди через this и один из good чтения на том же контексте. Вы получите четкое представление о том, чего вам не хватает в настоящее время. !! Это хороший пример, показывающий вам разницу

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