각도에서 정적 지시어 템플릿에서 격리 된 스코프 속성에 액세스하는 방법?

Question

컨트롤러 :

이

app.controller('MainCtrl', ['$scope', function($scope) { 
    $scope.temp = { 
     'name': 'Test' 
    }; 
}]); 

템플릿 :

이

<custom-field ng-model="temp.name"> 
    <md-input-container class="addon-menu"> 
     <label>Name</label> 
     <input ng-model="ngModel" type="text" ng-focus="setLastFocusedElement($event)" /> 
    </md-input-container> 
</custom-field> 

지침 :

이

app.directive('customField', function($timeout) { 
    return { 
     restrict: 'E', 
     scope: { 
      ngModel: '=' 
     }, 
     link: function($scope, $element, $attrs) { 
      console.log($scope.ngModel); // prints "test" 
     } 
    }; 
}); 

문제는 템플릿이 렌더링되면, 내가 input에 부착 된 값을 볼 수 있다는 것입니다 - 그것의 비어 있지만, 내부에 link 기능이 제대로 인쇄 되었기 때문에 작품을 기대하고 있습니다.

Answer 1

템플릿의 지시문 범위에 컨트롤러의 범위로 액세스하려고합니다. 대신 지시문의 템플릿 내부에서 마크 업을 이동하십시오.

지침 :

app.directive('customField', function($timeout) { 
return { 
    restrict: 'E', 
    scope: { 
     ngModel: '=' 
    }, 
    link: function($scope, $element, $attrs) { 
     console.log($scope.ngModel); // prints "test" 
    }, 
    template: '<md-input-container class="addon-menu"><label>Name</label><input ng-model="ngModel" type="text" ng-focus="setLastFocusedElement($event)" /></md-input-container>' 
}; 

템플릿 :

<custom-field ng-model="temp.name"></custom-field> 

또한 좋습니다 지시 템플릿으로 별도의 HTML 파일을 사용할 수 있습니다.

Answer 2

컨트롤러의 값을 확인하려고합니까?

가치가 있는지 보려면 $ parent. $ scope를 시도하십시오.