Vượt qua đối số cho phương thức điều khiển cha từ chỉ thị

Question

Làm cách nào để chuyển đối số cho phương thức end() của bộ điều khiển từ chỉ thị?

Chỉ

var fileuploader = function() { 
    return { 
     restrict: 'E', 
     scope: { 
      onEnd: '&', 
     }, 
     controller: function ($scope) { 
      // When upload is done 
      $scope.onEnd(/* file */); 
     } 
    }; 
} 

khiển

module.controller('Ctrl', function ($scope) { 
    $scope.end = function (file) { 
     console.log('file', file); 
    }; 
}); 

mẫu:

<div ng-controller='Ctrl'> 
    <fileuploader on-end='end()'></fileuploader> 
</div> 

Tôi cũng tự hỏi nếu điều này là một cách làm ngớ ngẩn vì tôi không thấy điều này được sử dụng ở bất cứ nơi nào khác. Có lẽ sau đây là góc cạnh hơn?

Chỉ

var fileuploader = function() { 
    return { 
     restrict: 'E', 
     scope: { 
      onEnd: '=', 
     }, 
     controller: function ($scope) { 
      // When upload is done 
      $scope.file = file; 
     } 
    }; 
} 

khiển

module.controller('Ctrl', function ($scope) { 
    $scope.$watch('file', function (val) { 
     console.log('file', val); 
    }); 
}); 

Template

<div ng-controller='Ctrl'> 
    <fileuploader on-end='file'></fileuploader> 
</div> 

này cho biết thêm một số indirec mặc dù và có thể ít hơn về phía trước sau đó gọi một phương pháp điều khiển.

Answer 1

aight thưa ông, đây là một ví dụ, xin lỗi nếu giải thích của tôi không phải là siêu rõ ràng: http://plnkr.co/edit/3wO3So

Xem:

<div ng-controller='fooCtrl'> 
     <fileuploader directive-end-fn='end(directiveData)'></fileuploader> 
    </div> 

khiển & Chỉ

app.controller('fooCtrl', function($scope) { 
    /// This end() function sits on the controller it will be passed data from the directive 
    $scope.end = function (directiveData) { 
     console.log("I'm in the controller " + directiveData); 
    }; 
}); 

app.directive('fileuploader', function(){ 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     /// I bind the end function from the controller to scope.directiveEndFn, 
     //I'll use it in the link function later 
     directiveEndFn: '&', 
    }, 
    /// I take your directive, add an input box as a model (model.input) 
    template: '<div><input type="text" ng-model="model.input"><div>{{model.input}}</div></div>', 
    /// Put your logic in the linking function, so it runs all the time.  
    link: function(scope,element){ 
     /// This could be any event, right now I'm watching the model.input for event changes. 
     //It fires a callback that allows me to do stuff when changes happen 
     scope.$watch("model.input", function(myModelValue){ 
       // I use scope.directiveEndFn with an "Object Map", 
       // I tell it to use the model.input which is now assigned to myModelValue value, 
       // It's a $watch convention you can read more about, whatever gets "Watched" is 
       // is the parameter of the callback. 
       // The object map links myModelValue to DirectiveData 
       // Look at the view, which passes this information, 
       // from the directive to the controller - directive-end-fn='end(directiveData)' 
       scope.directiveEndFn({directiveData: myModelValue}); 
     }); 
    } 
    } 
}); 

This is a really good explanation on how to do this also. There are a couple more techniques there too!

Ngoài ra nếu bạn muốn hiểu nội suy phạm vi, using the &, view this.