지시어에서 부분으로 컨트롤러 범위 전달

Question

AngularJs를 처음 사용했습니다. 컨트롤러와 템플릿으로 구성된 경로가 있습니다. 템플릿에서 사용자 지정 지시문을 호출합니다. 사용자 지정 지시문은 컨트롤러에서 설정 한 범위를 가져와야하는 부분 파일을로드합니다. 부분 파일이 범위 데이터를 사용할 수 있도록 지시문에서 범위를 부분으로 전달하려면 어떻게해야합니까? 친절

날이 AngularJS와 구현 얻는 방법을 알려

지침의 링크 기능 내부

코드 :

콘솔에

myApp.directive('basicSummary', function() { 
    return { 
    restrict: 'E', 
    replace:'true', 
    templateUrl: "partials/basicSummary.html", 
    link: function(scope, elem, attrs) { 
     console.log(scope.testURL); 
    } 
    } 
}); 

출력이됩니다 : 정의되지 않은

업데이트 : 변수가 초기화되지 않은 이유의 근본 원인을 발견했습니다. 문제는 변수가 컨트롤러에서 ajax 호출을 생성하여 가져 오는 것입니다. 그리고 아약스 호출이 완료되고 변수가 컨트롤러 내부의 스코프 안에 넣어지면 부분 파일이 이미로드되어 있으므로 점점 커지고 있습니다. 지시문 내부의 변수 값은 undefined입니다.

http 호출 성공시에만 부분 및 지시문을로드 할 수 있습니까?

jsfiddle 링크 추가 : 당신의 지시에, 같은 당신이와 범위를 분리하지 않는

scope: {} 

을 http://jsfiddle.net/prashdeep/VKkGz/

Answer 1

지시문 정의에서 범위에 새 변수를 추가하여 양방향 바인딩을 만들 수 있으며 변경 사항을 안전하게 볼 수 있습니다 (변수가 ajax를 통해 채워지면 JavaScript에서 사용). 템플릿에서 변수가 정의되었는지 여부에 따라 ng-show를 사용하여 표시/숨기기를 수행하십시오. http://jsfiddle.net/HB7LU/3588/

기본 템플릿

<div ng-controller="MyCtrl"> 
    <my-test my-test-url="myAjaxProperty"></my-test> 
</div> 

앱 정의

var myApp = angular.module('myApp',[]); 

myApp.directive('myTest', function(){ 
     return { 
     restrict: 'E', 
     repalce: 'true', 
     template: '<div ng-show="myTestUrl">{{myTestUrl}}</div>', 
      scope: { myTestUrl: '=' }, 
     link: function(scope, elem, attrs){ 

      scope.$watch('myTestUrl', function(newVal, oldVal){ 
      if(newVal){ 
       console.log("Watched value is defined as: "+scope.myTestUrl); 
      } 
      }) 
     } 
     } 
    }); 

function MyCtrl($scope, $timeout) { 

    $timeout(function(){ 
     $scope.myAjaxProperty = "My Test Url"; 
     console.log("Ajax returned"); 
    }, 3000, true) 


    console.log("Default Controller Initialized"); 
} 

Answer 2

를, 당신의 범위는 직접 부모 컨트롤러의 범위에 액세스 할 수 있습니다.