2014-10-10 2 views
0

나는 내 문제 표시하려면이 plunker이 : 내가 좋아하는대로 plunker에서 http://plnkr.co/edit/bNha1xOrnhnyhvXtXSnX?p=preview지시어의 범위를 조사하는 방법은 무엇입니까?

angular.module('docsTransclusionExample', []) 
.controller('Controller', ['$scope', function($scope) { 
    $scope.arr = [1,2,3,4]; 
}]) 

.directive('myDialog', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     arr: '=' 
    }, 
    templateUrl: 'my-dialog.html', 
    link: function (scope) { 
     var lengthOfArray = scope.arr.length; 
     scope.test = 'The array length is ' + lengthOfArray; 
    } 
    }; 
}); 

를, 모든 작동 : 나는 scope.arr 배열을 설정하고, 링크를 조사합니다. 이것은 나에게 스코프 (테스트)에 더 많은 것들을 추가 할 수있는 가능성을 주며 이것을 프린트한다. 이와 같이 템플릿을 사용 :

[1,2,3,4] - The array length is 4 

가 SO :이 예에서, 어레이는 직접 상기 제어기에 설정

{{arr}} - {{test}} 

을 .. 이런 결과를 얻는다. 그러나 실제로 이것을 구현할 때 배열은 서버에서 가져온 json 객체입니다. 그 결과 나는 계속 '정의되지 않음'을 계속 얻는다. 필자는 지시어가 데이터를 요청할 때까지 (거의) 지연되지 않았기 때문에 실제로 전달 될 때까지라고 생각합니다. 반면 지시문의 링크는 작동하지 않습니다.

내가 시도 할 수있는 좋은 아이디어가 있습니까?

업데이트 :

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

실행 그것은 다음 결과 창에서 뭔가 같이 말해야한다 : 내가 문제를 보여주기 위해이 Plunker을했습니다

The array length is 5 
(content of array...) 

이제 script.js (또는 다른 파일)로 이동 한 다음 줄 바꿈 아랫쪽이나 뭔가, Plunker 페이지를 다시로드합니다. 그것으로 ... 내가 제대로하고있어 확실 나는 시계를 추가하려고했습니다

(content of array...) 

있지만 : 그리고, 때때로, 스크립트는 배열을 읽어 실패하고 출력은됩니다 작동하지 않는 것 같습니다.

또 다른 재미있는 점은 Plunker에서와 같이 더 자주 작동한다는 것입니다. 그러나 localhost에서는 이것이 결코 작동하지 않습니다.

업데이트 2

나는 이것이 $ 시계를 사용하여 해결하기 위해 관리했습니다. 올바른 솔루션으로 업데이트 Plunker : 당신이 먼저 정의하지 않으면 편곡는 전화를 한 후 생성되기 때문에 http://plnkr.co/edit/bNha1xOrnhnyhvXtXSnX?p=preview

.directive('myDialog', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     contentOfList: '=' 
    }, 
    templateUrl: 'my-dialog.html', 
    link: function (scope) { 
     scope.counter = 0; 
     scope.$watch('contentOfList', function() { 
     scope.counter = scope.counter + 1; 
     var lengthOfArray = scope.contentOfList.categoryList[0].rows.length; 
     scope.test = 'The array length is ' + lengthOfArray; 
     }); 
    } 
    }; 
}); 

답변

0

, 당신은 가능성이 정의되지 않은 오류에 타격을 줄 것으로 예상된다. 빈 배열을 만든 다음 채 웁니까?

뭔가 같은 :

angular.module('docsTransclusionExample', []) 
.controller('Controller', ['$scope', '$http', function($scope, $http) { 
    $scope.arr = []; 
    $http.get("somedata.json").success(function(result) { 
     $scope.arr = result; 
    }); 
    }]); 

http://plnkr.co/edit/1yt3OSdrrbdTpa6FnWT8?p=preview 이 당신 같은 routeprovider에서 해결 기능 중에 컨트롤러 초기화하기 전에 데이터를 페치) 1 문제 해결하는 방법은 두 가지가 있습니다 그것은

+0

나는 당신의 제안과 조금 다르게 해왔습니다. 내 첫 번째 게시물에 대한 업데이트를 참조하십시오. –

0

도움이되기를 바랍니다 당신이 경우 라우팅을 사용 중입니다 2) 시계를 사용하여 변경 사항을 살펴보고 속성을 설정해야합니다.

scope.$watch('arr',function(newvalue,oldvalue){ 
      if(newvalue===oldvalue){return}; 
      scope.test=newvalue.length 
      },true); 
+0

지시문의 링크 안에 시계를 추가하려고했지만 트릭을 수행하지 않은 것 같습니다. 제 첫 번째 게시물의 업데이트를 보시고, 제가 가지고있는 문제를보다 명확하게 지정 해주는 새로운 Plunker가 있습니다. –

관련 문제