ng-repeat 내의 Angularjs 지시문이 컨트롤러 데이터 외부에서 업데이트되지 않습니다

내에서 사용하고있는 고립 스코프 지시문이 있습니다.이 지시문은 해당 템플릿의 컨트롤러에서 배열을 반복합니다. 다음과 같이 템플릿은 다음과 같이ng-repeat 내의 Angularjs 지시문이 컨트롤러 데이터 외부에서 업데이트되지 않습니다

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="bootstrap.min.css" /> 
    <script src="angular.min.js"></script> 
    <script src="script1.js"></script> 
    </head> 

    <body ng-app="AddNewTest" ng-controller="AddNewController"> 
    <div class="items" ng-repeat="row in rows"> 
     <add-new-row data="row" index="$index"></add-new-row> 
    </div> 
    </body> 

</html>

이 지침이 정의 :

angular.module('AddNewTest', []). 
directive('addNewRow', function ($timeout) { 
    return { 
    controller: 'AddNewController', 
    link: function (scope, element, attribute) { 
     element.on('keyup', function(event){ 
     if(scope.index + 1 == scope.rows.length) { 
      console.log('keyup happening'); 
      $timeout(function() { 
      scope.rows.push({ value: '' }); 
      scope.$apply(); 
      }); 
     } 
     }) 
    }, 
    restrict: 'E', 
    replace: true, 
    scope: { 
     index: '=' 
    }, 
    template: '<div class="add-new"><input type="text" placeholder="{{index}}" ng-model="value" /></div>' 
    } 
}). 
controller('AddNewController', function ($scope, $timeout) { 
    $scope.rows = [ 
    { value: '' } 
    ]; 
});

그러나 NG-반복 새로운 데이터가 추가 렌더링하지 않아도 새 행을 추가하고 $apply()을 수행 한 후. 도와주세요. 행

Plnkr Link Here

출처

2016-08-29 jsbisht

귀하는 ** 지침 ** 범위 **를 보유하고 있습니다. 지시어에'rows' 배열을 전달하십시오. 이 범위와 같이 : { index : '=', rows : "=" }'.'AddNewController' 컨트롤러에 행을 만들지 마십시오. '$ scope.rows = [ {value : ''} ]'을 제거하십시오. –

어떻게 작동 시키시겠습니까? 각 값에 대한 입력? 어레이에 밀어 넣기 위해 사용되는 입력은 단 하나입니까? 어떤 결과를 기대합니까? – gyc

@gyc 마지막 행에 keyup 이벤트에 새 행을 추가하고 싶습니다. – jsbisht

패스 배열은 다음과 지시어 : -

scope: { 
    index: '=', 
    rows :'=' 
}, 

<add-new-row rows="rows" index="$index"></add-new-row>

Working plunker

출처

2016-08-29 12:58:37 jitender

도움을 주셔서 감사합니다. 지시계 정의에서 컨트롤러를 제거하면 행 업데이트시 ng-repeat를 업데이트 할 수있었습니다. – jsbisht

각 NG 반복 당신이 가지고 당신의 지시자 내부에 고립 된 범위를 선언보다 고립 된 범위를 만듭니다 div와 같은 컨트롤러. 당신은 $ 범위 수프에서 수영하고 있습니다 :)

나는 개인적으로 자체 컨트롤러로 깨끗하고 독립적 인 지시를 내릴 것입니다. 당신은 여전히 bindToController를 사용하여 지시에 일부 데이터를 바인딩 할 수 있습니다 물론

angular.module('AddNewTest', []). 
directive('addNewRow', function() { 
    return { 
    restrict: 'E', 
    controller: MyController, 
    controllerAs: '$ctrl', 
    template: '{{$ctrl.rows.length}}<div class="add-new"><pre>{{$ctrl.rows | json}}</pre><input type="text" placeholder="0" ng-model="value" /></div>' 
    } 
}). 
controller('MyController', MyController); 

function MyController($scope) { 
    var vm = this; 
    this.rows = [ { value: '' } ]; 

    $scope.$watch("value",function(value){ 
    if(value) 
     vm.rows.push({ value: value }); 
    }); 
}

http://plnkr.co/edit/AvjXWWKMz0RKSwvYNt6a?p=preview

(대신 범위 : {}) 그리고 당신이 NG 반복을 필요로하는 경우, 직접 지시 템플릿에 그것을 할.

출처

2016-08-30 10:13:33 gyc

예. 내 잘못이야. 나는 각각의 지시어에 대해 별도의 컨트롤러를 사용한다. 그러나 이번에는 글로벌 템플릿과 동일한 방식으로 재사용하려고 애 쓰고 있습니다. – jsbisht

ng-repeat 내의 Angularjs 지시문이 컨트롤러 데이터 외부에서 업데이트되지 않습니다

답변

관련 문제