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

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

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

如何将模型传递给Angular.js中的指令？

5 个答案: