如何將模型傳遞給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">',
   };
}); 

請參閱柱塞

Answer 2

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 3

更改為有效：scope：{dateModel：“ =”}。

Answer 4

它應該是：

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 5

請通過本和一個良好的同一背景下的讀取。 您將對目前所缺少的東西有個清晰的了解。！ 這是一個很好的例子，向您展示差異

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