다른 속성에서 정의된 디렉티브 속성 내의 콜백 함수

다른 속성에서 정의된 디렉티브 속성 내의 콜백 함수

그래서 저는 다음과 같은 지시를 내렸습니다.mySave거의 이것뿐입니다.

app.directive('mySave', function($http) {
   return function(scope, element, attrs) {
      element.bind("click", function() {
          $http.post('/save', scope.data).success(returnedData) {
              // callback defined on my utils service here

              // user defined callback here, from my-save-callback perhaps?
          }
      });
   }
});

원소 자체는 이렇게 보입니다.

<button my-save my-save-callback="callbackFunctionInController()">save</button>

콜백Function In Controller는 현시점에서는

$scope.callbackFunctionInController = function() {
    alert("callback");
}

내가 할 때console.log() attrs.mySaveCallbackmy-save 지시문 안에, 그냥 끈을 줘callbackFunctionInController()어디선가 이걸 $parse해야 한다고 읽었는데 괜찮을 것 같아서$parse(attrs.mySaveCallback)그 덕분에 기능은 돌아왔지만, 내가 찾던 기능은 거의 없었다.

function (a,b){return m(a,b)} 

내가 뭘 잘못하고 있지?이 접근법은 처음부터 결함이 있습니까?

따라서 ProLoser가 제안하는 격리된 스코프를 사용하는 것이 가장 좋은 방법인 것 같습니다.

app.directive('mySave', function($http) {
   return {
      scope: {
        callback: '&mySaveCallback'
      }
      link: function(scope, element, attrs) {
        element.on("click", function() {
            $http.post('/save', scope.$parent.data).success(returnedData) {
                // callback defined on my utils service here

                scope.callback(); // fires alert
            }
        });
      }
   }
});

파라미터를 컨트롤러로 되돌리려면 다음 절차를 수행합니다.

[11:28] <revolunet> you have to send named parameters 
[11:28] <revolunet> eg my-attr="callback(a, b)" 
[11:29] <revolunet> in the directive: scope.callback({a:xxx, b:yyy})

당신이 하고 있는 일에 대해 많은 방법이 있다.당신이 알아야 할 첫 번째 사실은$http.post()템플릿 엔진에 의해 그 DOM 요소가 렌더링되는 즉시 호출됩니다.그게 끝입니다.리피터에 넣으면 리피터의 새로운 아이템마다 콜이 이루어지기 때문에, 이것은 결코 당신이 원하는 것이 아니라고 생각합니다.만약 그렇다면 DOM이 존재한다고 해서 백엔드에 대한 쿼리가 지시되어서는 안 되기 때문에 실제로 올바르게 설계되지 않은 것입니다.

어쨌든, 질문에 직접 대답합니다. $parse에 있는 비록 형편없지만 문서를 읽으면 평가 표현이 반환됩니다.평가할 스코프를 전달하여 이 함수를 실행하면 통과된 스코프에서 해당 식의 현재 상태가 반환됩니다. 즉, 함수가 실행됨을 의미합니다.

var expression = $parse(attrs.mySave);
results = expression($scope); // call on demand when needed
expression.assign($scope, 'newValu'); // the major reason to leverage $parse, setting vals

네, 처음에는 조금 혼란스럽지만, 비동기 애플리케이션에서는 항상 $scope가 변경된다는 것을 이해해야 합니다.또한 이 모든 것은 방법을 결정하는 것이 아니라 가치를 결정하는 타이밍에 관한 것입니다. $parse는 단순히 읽기만 하는 것이 아니라 값을 할당할 수 있는 모델에 대한 참조에 더 유용합니다.

물론 격리 스코프를 작성하거나 다음 작업을 수행하는 방법에 대해 자세히 읽어보실 수 있습니다.$eval()표현법

$scope.$eval(attrs.mySave);

.$eval을 사용하여 지정된 범위에서 문을 실행할 수 있습니다.

app.directive('mySave', function($http) {
   return function(scope, element, attrs) {
      $http.post('/save', scope.data).success(returnedData) {
          // callback defined on my utils service here

          // user defined callback here, from my-save-callback perhaps?
          scope.$eval(attrs.mySaveCallback)
      }
   }
});

TD: 데모

지시문과 컨트롤러 간에 데이터를 공유하려면 양방향 바인딩을 사용할 수 있습니다.

app.controller('AppController', function ($scope) {
   $scope.callbackFunctionInController = function() {
      console.log('do something')
   };

   $scope.$watch('somedata', function(data) {
      console.log('controller', data);
   }, true);
});

app.directive('mySave', function($http, $parse) {
   return {
     scope: {
       data: '=mySaveData',
       callback: '&mySaveCallback' //the callback
     },
     link: function(scope, element, attrs) {
       $http.get('data.json').success(function(data) {
         console.log('data', data);
         scope.data = data;
         scope.callback(); //calling callback, this may not be required
       });
     }
   };
});

데모: 바이올린

scope: {
    callback: '&mySaveCallback'
}

스코프를 명시적으로 설정하는 것이 좋은 해결책이 될 수 있지만 원래 스코프의 다른 부분에 도달하려면 덮어쓰기만 했으므로 할 수 없습니다.어떤 이유에서인지 스코프의 다른 부분에도 도달해야 했기 때문에 ng-click과 같은 구현을 사용했습니다.

HTML에서의 내 지시어 사용:

<div my-data-table my-source="dataSource" refresh="refresh(data)">

지시문 내부(스코프를 명시적으로 설정하지 않음):

var refreshHandler = $parse(attrs.refresh);
    scope.$apply(function () {
    refreshHandler( {data : conditions}, scope, { $event: event });
});

이것으로 컨트롤러의 함수를 호출하여 파라미터를 전달할 수 있습니다.

컨트롤러 내:

$scope.refresh= function(data){
    console.log(data);
}

그리고 상태를 올바르게 출력합니다.

이건 내게 효과가 있었다.

뷰 스크립트 내부

<tag mycallbackattrib="scopemethod">

지시문 내부

$scope[attrs.mycallbackattrib](params....);

그것은 정확하게 불리고 패러햄은 통과되지만, 아마도 최고의 '각선 방식'은 아닐 것이다.

사용하시면 .ng-click★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

app.directive('mySave', function($http, $parse) {
   return {
     scope: {
       data: '=mySaveData',
       callback: '&' //the callback
     },
     link: function(scope, element, attrs) {
       $http.get('data.json').success(function(data) {
         console.log('data', data);
         if (scope.callback()) scope.callback().apply(data);
       });
     }
   };
});

언급URL : https://stackoverflow.com/questions/15896985/callback-function-inside-directive-attr-defined-in-different-attr