Javascript 如何在Angular.js中将模型传递给指令？_Javascript_Angularjs

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

javascript angularjs

Javascript 如何在Angular.js中将模型传递给指令？,javascript,angularjs,Javascript,Angularjs,我试图弄清楚如何在指令和中继器之间创建双向绑定。我一直在尝试在互联网上找到的各种东西。这是我现在拥有的，但它不会将item.myDate传递到需要它的模板 app.directive("mydirective", function(){ return { restrict:'E', scope:{dateModel: "&"}, template:'<input class="date" ng-model="{{dateModel}}"&g

我试图弄清楚如何在指令和中继器之间创建双向绑定。我一直在尝试在互联网上找到的各种东西。这是我现在拥有的，但它不会将item.myDate传递到需要它的模板

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

这应该怎么做

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

HTML

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

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

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

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

app.directive（“mydirective”，function（））{
返回{
限制：'E'，
作用域：{dateModel:&“}，
模板：“”，
};
});

更改此将起作用：范围：{dateModel:“=”}。

应该是：

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

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

app.directive（“mydirective”，function（））{
返回{
限制：'E'，
作用域：{dateModel:'@'}，
模板：“”，
};
});

如果您希望您的指令使用与指令模板中使用的名称不同的名称（例如myDate），则应如下所示：

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

HTML

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

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

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

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

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

app.directive（“mydirective”，function（））{
返回{
限制：'E'，
作用域：{dateModel:'@myDate'}，
模板：“”，
};
});

它应该是：

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

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

app.directive（“mydirective”，function（））{
返回{
限制：'E'，
作用域：{dateModel:'@'}，
模板：“”，
};
});

如果您希望您的指令使用与指令模板中使用的名称不同的名称（例如myDate），则应如下所示：

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

HTML

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

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

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

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

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

app.directive（“mydirective”，function（））{
返回{
限制：'E'，
作用域：{dateModel:'@myDate'}，
模板：“”，
};
});

它应该是：

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

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

app.directive（“mydirective”，function（））{
返回{
限制：'E'，
作用域：{dateModel:'@'}，
模板：“”，
};
});

如果您希望您的指令使用与指令模板中使用的名称不同的名称（例如myDate），则应如下所示：

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

HTML

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

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

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

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

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

app.directive（“mydirective”，function（））{
返回{
限制：'E'，
作用域：{dateModel:'@myDate'}，
模板：“”，
};
});

它应该是：

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

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

app.directive（“mydirective”，function（））{
返回{
限制：'E'，
作用域：{dateModel:'@'}，
模板：“”，
};
});

如果您希望您的指令使用与指令模板中使用的名称不同的名称（例如myDate），则应如下所示：

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

HTML

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

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

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

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

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

app.directive（“mydirective”，function（））{
返回{
限制：'E'，
作用域：{dateModel:'@myDate'}，
模板：“”，
};
});

app.directive（“mydirective”，function（））{
返回{
限制：'E'，
作用域：{dateModel:'='}，//在这里您必须更改代码
模板：“”，
};
});

app.directive（“mydirective”，function（））{
返回{
限制：'E'，
作用域：{dateModel:'='}，//在这里您必须更改代码
模板：“”，
};
});

app.directive（“mydirective”，function（））{
返回{
限制：'E'，
作用域：{dateModel:'='}，//在这里您必须更改代码
模板：“”，
};
});

app.directive（“mydirective”，function（））{
返回{
限制：'E'，
作用域：{dateModel:'='}，//在这里您必须更改代码
模板：“”，
};
});

请在同一上下文中阅读其中一个。您将清楚地了解您目前缺少的内容。！！这是一个很好的例子，向您展示了不同之处

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

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


父范围
//更新以查看父作用域如何与
组件范围
属性
get:{{isolatedAttributeFoo}
设置：
//这不会更新父范围。
结合
get:{{isolatedBindingFoo}
设置：
//这会更新父范围。
表情
提交
//这将调用父作用域上的函数。
var myModule=angular.module（'myModule'，[]）
.directive（'myComponent'，function（）{
返回{
限制：'E'，
范围：{
/*注意：通常我会设置属性和绑定
是同一个名字，但我想在
父作用域和隔离作用域。*/
isolatedAttributeFoo:“@attributeFoo”，
isolatedBindingFoo:'=bindingFoo'，
isolatedExpressionFoo:“&”
}        
};
})
.controller（'MyCtrl'，['$scope'，函数（$scope）{
$scope.foo='Hello！'；
$scope.updateFoo=函数（newFoo）{
$scope.foo=newFoo；
}
}]);

请在同一上下文中阅读其中一个。您将清楚地了解您目前缺少的内容。！！这是一个很好的例子，向您展示了不同之处

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

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


父范围
//更新以查看父作用域如何与
组件范围
属性
get:{{isolatedAttributeFoo}
设置：
//这不会更新父范围。
结合
get:{{isolatedBindingFoo}
设置：
//这会更新父范围。
表情
提交
//这将调用父对象上的函数