4

我有一个角度应用程序设置如下。Ng-repeat 包含 li 元素，每个元素有 2 个输入（远远超过 2 个，但对于这个演示，我有 2 个）。

该指令设置控制器。

HTML

<li ng-repeat="lw in lw_list"   my-lw   ng-model="lw"  >            
    <input my-cell ng-init="init(lane , $index , 'name')"  ng-class="'lib_name inline_div'" type='text'     value="{{ lw.library.name }}" >
    <input my-cell ng-init="init(lane , $index , 'volume')  "ng-class="'number_field'"      type="number"   ng-model='volume' />    
</li>

javascript

angular.module('Demo').directive("myCell",  function(CellStore){
    return {
            controller : 'CellCtrl' , 
        };
}) ;


angular.module('Demo').controller('CellCtrl' , function($scope , CellStore){
    $scope.init = function(lane, row, column){
        $scope.row = row  ;
        $scope.column = column ; 
        console.log("init" ,  $scope.$parent );
        CellStore.addCell(  lane.lane,  row, column , $viewValue ) ; 
    } ; 
}) ;

所以这个想法是，当每个输入被创建时，它会调用 init 函数，它将输入值存储在一个嵌套的散列中（供以后检索）。但是我不知道如何从控制器中访问 $viewValue 变量（输入包含的值）。

4

3 回答 3

11

其他人已经解决了你的问题，但我没有看到你的主要问题的答案，如果你想这样做，如何从控制器访问 $viewValue。

您真正要做的是访问附加到每个输入的ngModelController实例。如果您只是name在表单元素和其中的每个输入上放置一个属性，那么它们的控制器将可以在$scope. （由于您使用的是 ng-repeat，因此您需要某种动态命名方案，以便您可以访问它们。您也可以只迭代它们。）

为所有内容命名后，要获取实例，只需：

var instance = $scope.formName.inputName;

$viewValue 应该在：

instance.$viewValue

获得此参考后，您还可以使用 ngModelController 上的其他方法，例如

instance.$setValidity();

编辑：你可以在这个 Codepen上玩这个，看看它与一些验证问题的关系。

于 2014-01-27T21:58:51.193 回答
2

正如@BoxerBucks 所说，将您的代码重构为一个link函数并从那里进行链接。您也可以取消该ng-init方法，因为在创建指令时会调用链接函数。

首先，我稍微更改了指令，因此它采用属性值中的列名my-cell（lw对象和$index都在范围内，因此无需传递它们）：

<li ng-repeat="lw in lw_list" >            
    <input my-cell="name" ng-class="'lib_name inline_div'" type='text' ng-model="lw.name" >
    <input my-cell="volume" ng-class="'number_field'" ng-model='lw.volume' />    
</li>

然后链接函数将其注册为CellStore：

app.directive("myCell",  function(CellStore){
    return function(scope, elem, attrs) {
        CellStore.addCell(scope.lw, scope.$index, attrs.myCell);
    };
});

最后，addCell方法：

app.service('CellStore', function() {
    this.addCell = function(lw, row, column) {
        console.log('add cell:', lw.name, row, column, lw[column]);
    };
});

http://jsfiddle.net/9Lmwj/2/

我不太确定您的数据结构，但希望这是一个有用的开始。

于 2013-08-29T16:14:04.863 回答
0

您可以将初始化代码放在指令中并传入您需要的数据：

<input my-cell  ng-class="'lib_name inline_div'" type='text' value="{{ lw.library.name }}" >

然后指令更改为如下内容：

angular.module('Demo').directive("myCell",  function(){
    return {
            function(scope, element, attrs){}
                 scope.row = row;
                 scope.column = column; 
                 scope.CellStore.addCell(scope.lane.lane, row, column, attrs.value); 
        };
}) ;

由于我看不到您的应用程序代码的其余部分，您可能需要更改一些变量名称才能使其工作，但基本前提是只使用指令的链接功能来运行您的初始化。此外，在指令中，您可以访问声明指令的继承范围。

于 2013-08-29T15:24:59.463 回答