Question

我有一个角度应用程序设置如下。 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变量（输入包含的值）。

Answer 1

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

您真正在做的是访问附加到每个输入的ngModelController实例。如果您只是在表单元素和其中的每个输入上放置name属性，则可以在$scope上访问其控制器。（因为你正在使用ng-repeat，所以你需要某种动态命名方案，这样你就可以完全接触它们。你也可以迭代它们。）

一旦你命名了所有东西，为了获得实例，它只是：

var instance = $scope.formName.inputName;

$ viewValue应位于：

instance.$viewValue

一旦你有了这个参考，你也可以在ngModelController上使用其他方法，比如

instance.$setValidity();

编辑：你可以在this Codepen上使用它，看看它与某些验证问题的关系。

Answer 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/

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

Answer 3

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

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

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

如何从Angular中的控制器访问$ viewValue

3 个答案: