javascript - down - angularjs v1 7



templateUrl이 재정의하기 전에 AngularJS 지시문의 내부 HTML 검색 (1)

iniital html에 액세스하려면 directive controller 내에서 $transclude transclude를 사용할 수 있습니다. 이전 버전과 약간의 차이가 있으므로 1.2를 사용한다고 가정합니다.

controller:function($scope,$transclude){
      $transclude(function(clone,scope){
        /* for demo am converting to html string*/
         $scope.buttons=angular.element('<div>').append(clone).html();
      });

    }

DEMO

나는 최근에 리팩터링 한 폼 유효성 검사 보충 판에 사용하는 지시문을 가지고 있습니다. 확장하기 전에 지침을 조금 더 설명 할 수있게하십시오.

지시어 사용법 :

<form class="form-horizontal" name="personalDetails" validated-form>

    <!-- Pass buttons into form through here -->
    <a href="" class="btn btn-success" 
        data-ng-click="saveDetails()"
        data-ng-disabled="!personalDetails.$valid">Save Changes</a>

</form>

이전에는 지시문이 이와 같이 보였으며 작동했습니다 .

app.directive('validatedForm', function($compile, $sce) {
    return {
        restrict: 'A',
        scope: true,
        link: function(scope, element, attrs) {

            var template = //... HTML boilerplate code
            var buttons  = element.html(); // Get contents of element before overriding

            element.html(template + buttons);
            $compile(element.contents())(scope);

        }
    }
});

html 템플릿이 엉망이되어 버렸습니다. 템플릿의 'inside'버튼을 감싸기보다는 감싸고 싶었습니다. 그래서 나는 훨씬 더 효과적인 지시라고 생각한 것에 리팩터링했다.

app.directive('validatedForm', ['$compile', '$sce', function ($compile, $sce) {

    var domContent = null;

    return {
        restrict: 'AE',
        scope: true,
        templateUrl: '/Content/ngViews/directives/validated-form.html',
        link: function(scope, element, attrs) {

            // This now returns the contents of templateUrl 
            // instead of what the directive had as inner HTML
            domContent = element.html(); 

            // Scope
            scope.form = {
                caption: attrs.caption,
                location: 'Content/ngViews/forms/' + attrs.name + '.html',
                buttons: $sce.trustAsHtml(domContent),
                showButtons: !(domContent.replace(' ', '') === '')
            };

        }
    };
}]);

그래서 내가 알아챈 것은 element.html ()이 이제 내 지시문의 내부 HTML 내용 대신 templateUrl의 내용을 검색한다는 것입니다. templateUrl에 의해 재정의되기 전에 어떻게해야 내 지침의 내용을 얻을 수 있습니까?





angularjs