javascript Angular - 本机API或角度内的第三方插件

Posted 2021-05-04

//
// USING NATIVE APIS or THIRD PARTY PLUGINS INSIDE ANGULAR DIRECTIVES
//

// How to use native DOM APIs alongside AngularJS directives
// ** CHECK CODE EXAMPLE using native Filelist API (File upload widget con drag & drop)

// Because we are using native APIs, Angular doesn't know about this
$scope.$apply(); // Tells Angular that changes happened outside Angular system or the event loop, so it has to go update all of our modules and views
// * en el codexample, estamos actualizando el array de files del modelo pero desde fuera de Angular, por eso tenemos que 'avisar' a Angular cuando acabemos, para que actualice las vistas etc

// How to use Angular directives alongside third-party plugins (like jquery plugins etc)
// ** CHECK CODE EXAMPLE using third party plugins (pickaday.js)

//index.html
<div ng-controller="DateController as ctrl">
  Parent date: {{ ctrl.date | date: 'MMM d, yyyy' }} //we apply a filter to the printed date
  <date-picker date="ctrl.date"></date-picker> //we pass the date to the directive
</div>

//
//controllers/DateController.js
function DateController() {
	this.date = new Date(); //we define this date property which is get passed into the directive itself
}

// now for the plugin...
// First, include the Pickaday plugin in your project
// It's included in the global scope, but we don't really want to rely on the global scope every place we use Pickaday
// So we will create a SERVICE: this allows us to use it inside Angular, so we can use PikadayService as an dependency injection wrapper for the global Pikaday object:

//services/PikadayService.js
function PikadayService() {
	return function (options) { //pass the options we want
		return new Pikaday(options); //return new instance of pickaday
	}
}

//directives/DatePicker.js
function DatePicker($timeout, PikadayService) {  //we inject PikadayService so we can use Pikaday inside our directive. * $timeout is an angular wrapper for setTimeOut. 
	return {
		scope: {
			date: '=' //bind to the date property to allow us to acces it in our template
		},
		template: `
			<div>
				Isolate date: {{ date | date: 'MMM d, yyyy' }} 
				<input type="text"> 
			</div>
		`, //we use the exact 'date' filter as before, and this input is where we bind the Pickadate plugin to
		link: function ($scope, $element, $attrs) {
			var field = $element[0].querySelector('input'); //we grab the input where we're going to bind the Pikaday
			var picker = PikadayService({
				field: field,
				onSelect: function (date) { //callback function
					$timeout(function () {
						$scope.date = date; //update our date property with the new date selected in pikaday
                         //$scope.$apply(); //we can use it here, because we get an Angular error as we're setting the initial value of pickaday and an $apply() is already in progress. 
                         //We use $timeout: A timeout changes the execution order in javascript, because it pushes the event to the end of the call stack. In angular, $timeout calls the $digest, so we can think of this as a more safe $apply()
					});
				}
			});
			picker.setDate($scope.date); //initial value of pikaday (the date pased from the controller to the directive)
		}
	}
}