템플릿에 Angular Directive 특성 사용

템플릿에 Angular Directive 특성 사용

지시문에서 속성 값을 사용하려면 어떻게 해야 합니까?내 요소는 다음과 같습니다.

<div class="tooltip-icon" 
  data-my-tooltip="click" 
  data-tooltip-title="foo" 
  data-tooltip-content="test content"></div>

다음과 같은 지시문 템플릿에 사용하고 싶습니다.

mainApp.directive('myTooltip',
    function() {

        // allowed event listeners
        var allowedListeners = ["click"];

        return {
            restrict: 'A',
            template:   '<div class="tooltip-title">...</div>' +
                        '<div class="tooltip-content">' +
                        '...</div>',
            link: function(scope, elm, attrs) {
                if(allowedListeners.indexOf(attrs.myTooltip) != -1){
                    elm.bind(attrs.myTooltip, function(){
                        ...
                    });
                }

            }
        };
    }
);

세개의 점이 있는 곳에 코드가 있어야 하는데, 속성 객체의 내용을 얻는 방법을 알 수 없습니다 (attrs.tooltipTitle, 등)을 해당 템플릿에 입력합니다.

다음과 같이 속성을 끌어와 지시 범위에 배치할 수 있습니다.

angular.module('myApp', []).
directive('myTooltip', function ($log) {
    // allowed event listeners
    var allowedListeners = ["click"];
    return {
        restrict: 'A',
        template:   '<div class="tooltip-title">{{tooltipTitle}}</div>' +
                    '<div class="tooltip-content">' +
                    '{{tooltipContent}}</div>',
        scope: {
            tooltipTitle: '@tooltipTitle',
            tooltipContent: '@tooltipContent'
        },
        link: function (scope, elm, attrs) {
            if (allowedListeners.indexOf(attrs.myTooltip) != -1) {
                elm.bind(attrs.myTooltip, function () {
                    $log.info('clicked');
                });
            }

        }
    };
});

fiddle: http://jsfiddle.net/moderndegree/f3JL3/

이 질문은 이미 답변이 되었지만, 저는 Angular 코드도 공유하려고 합니다. 왜냐하면 이 영역은 종종 몇 가지 작동 예를 볼 때 유용하기 때문입니다.

각 페이지에 고유의 각도 컨트롤러가 있는 웹 페이지가 몇 개 있는데, 각 페이지에 HTTP GET 또는 POST 웹 서비스라고 불리는 페이지가 있을 때 나타나는 "기다려주세요" 팝업이 하나씩 표시되기를 원했습니다.

이렇게 하려면 각 웹 페이지에 다음 줄이 있습니다.

<please-wait message="{{LoadingMessage}}" ></please-wait>

...어쩔 수 없이는$scope그 페이지의 컨트롤러에...

$scope.LoadingMessage = "Loading the surveys...";

여기 제 코드가 있습니다.<please-wait>지시:

myApp.directive('pleaseWait',  
    function ($parse) {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                message: '@message'
            },
            link: function (scope, element, attrs) {
                scope.$on('app-start-loading', function () {
                    element.fadeIn(); 
                });
                scope.$on('app-finish-loading', function(){
                    element.animate({
                        top: "+=15px",
                        opacity: "0"
                    }, 500);
                });
            },
            template: '<div class="cssPleaseWait"><span>{{ message }}</span></div>'
        }
    });

어떻게 작동하는지 주목해보세요.message속성(){{LoadingMessage}}이 예에서) 및 지시문 템플릿에 값을 표시할 수 있습니다.

(사실 이 질문에 직접 답할 수 있는 부분은 그것뿐이지만, 몇 가지 팁을 더 알고 싶다면 읽어보세요.)

멋진 점은 각 컨트롤러가 웹 서비스에서 데이터를 로드하거나 저장하고자 할 때마다 Angular data 서비스를 호출한다는 것입니다.

   $scope.LoadAllSurveys = function () {
        DataService.dsLoadAllSurveys($scope).then(function (response) {
            //  Success
            $scope.listOfSurveys = response.GetAllSurveysResult;
        });
   }

그dsLoadAllSurveys기능은 이렇게 보입니다...

myApp.webServicesURL = "http://localhost:15021/Service1.svc";

myApp.factory('DataService', ['$http', 'httpPostFactory', 'httpGetFactory',
    function ($http, httpPostFactory, httpGetFactory) {

        var dsLoadAllSurveys = function (scope)
        {
            //  Load all survey records, from our web server
            var URL = myApp.webServicesURL + "/getAllSurveys";
            return httpGetFactory(scope, URL);
        }

        return {
            dsLoadAllSurveys: dsLoadAllSurveys
        }
    }]);

그리고 결정적으로 모든 "GET" 웹 서비스 호출은 다음과 같은 기능을 통해 이루어집니다. 여기에는 우리를 위해 Please Wait 제어 기능이 표시됩니다.서비스가 완료되면 제거합니다.

myApp.factory('httpGetFactory', function ($http, $q) {
    return function (scope, URL) {
        //  This Factory method calls a GET web service, and displays a modal error message if something goes wrong.
        scope.$broadcast('app-start-loading');          //  Show the "Please wait" popup

        return $http({
            url: URL,
            method: "GET",
            headers: { 'Content-Type': undefined }
        }).then(function (response) {
            scope.$broadcast('app-finish-loading');     //  Hide the "Please wait" popup
            if (typeof response.data === 'object') {
                return response.data;
            } else {
                // invalid response
                return $q.reject(response.data);
            }
        }, function (errorResponse) {
            scope.$broadcast('app-finish-loading');     //  Hide the "Please wait" popup

            //  The WCF Web Service returned an error.  
            //  Let's display the HTTP Status Code, and any statusText which it returned.
            var HTTPErrorNumber = (errorResponse.status == 500) ? "" : "HTTP status code: " + errorResponse.status + "\r\n";
            var HTTPErrorStatusText = errorResponse.statusText;

            var message = HTTPErrorNumber + HTTPErrorStatusText;

            BootstrapDialog.show({
                title: 'Error',
                message: message,
                buttons: [{
                    label: 'OK',
                    action: function (dialog) {
                        dialog.close();
                    },
                    draggable: true
                }]
            });

            return $q.reject(errorResponse.data);
        });
    };
});

이 코드가 마음에 드는 점은 이 한 가지 기능이 "기다려주세요" 팝업을 표시/숨긴 후에 검색하고, 오류가 발생하면 (우수한 부트스트랩 대화 상자 라이브러리를 사용하여) 오류 메시지를 표시한 후에 오류 결과를 호출자에게 다시 반환한다는 것입니다.

이 공장에서 작동하지 않으면 Angular 컨트롤러 중 하나가 웹 서비스를 호출할 때마다 "Please wait" 컨트롤을 표시한 다음 숨긴 다음 오류를 확인해야 합니다.

이제는 웹 서비스에 전화를 걸어 문제가 발생하면 사용자에게 알려주고, 그렇지 않으면 모두 작동한 것으로 가정하고 결과를 처리할 수 있습니다.

이것은 제가 훨씬 더 간단한 코드를 가질 수 있게 해줍니다.제가 그 웹 서비스를 어떻게 불렀는지 기억하세요.

   DataService.dsLoadAllSurveys($scope).then(function (response) {
        //  Success
        $scope.listOfSurveys = response.GetAllSurveysResult;
    });

이 코드는 오류 처리를 하지 않는 것처럼 보이지만 실제로는 모두 한 곳에서 뒤에서 관리됩니다.

Angular를 통해 공장과 데이터 서비스에 대한 이해를 계속하고 있지만, 이는 그들이 어떻게 도움을 줄 수 있는지 보여주는 강력한 예라고 생각합니다.

이게 말이 돼서 도움이 되기를 바랍니다.

언급URL : https://stackoverflow.com/questions/17345302/use-angular-directive-attributes-in-its-template