Here are some simple examples of how to get values for properties in Angular directives and how to use functions.

Direct access to

app.directive('my-directive',function(){
	return {
		scope:{
			attr1:'@',
			attr2:'=',
			attr3:'&'
		},
		link: function(scope){
			// scope.attr1
			// scope.attr2
			// scope.attr3
		}
	};
	})

Copy the code
  • attr1It’s a one-time acquisition
  • attr2It’s bidirectional binding
  • attr3Is a method that can be called inside a directive

Manually resolve passed variables

<

app.directive('my-directive',function(){
	return {
		scope:{},
		link: function(scope,ele,attrs){
			var attr1 = attrs.attr1;    // 'Hello'
			var attr2 = scope.$parent.$eval(attrs.attr2); // 'Hello'
		}
	};
	});

app.controller('myController',function($scope){
	$scope.value = 'Hello';
	})
Copy the code

Note: this approach uses the parent scope of the directive, so setting scope:false in the directive does not work. Use separate scopes instead.

In this way, data watch can also be realized

link: function(scope,ele,attrs){
	var attr1 = attrs.attr1;    // 'Hello'
	attrs.$observe('attr1',function(){
		console.log('attr1 changed');
	});
	var attr2 = scope.$parent.$eval(attrs.attr2); // 'Hello'
	scope.$parent.$watch(attrs.attr2,function(){
		console.log('attr2 chaned');
	});
	}
Copy the code

Using the $parse

link: function(scope,ele,attrs){
	var attr2 = $parse(attrs.attr2)(scope.$parent); // 'Hello'
	}
Copy the code

Using $eval is an indirect call to $parse

$eval: function(expr, locals) {return $parse(expr)(this, locals); $eval: function(expr, locals) {return $parse(expr)(this, locals); }Copy the code

Similarly, watch can be implemented using $parse

link: function(scope,ele,attrs){
	scope.$parent.$watch($parse(attrs.attr2),function(){
		console.log('attr2 chaned');
	});
	}
Copy the code

Method passing and use

Parse the function using the $eval or $parse methods described above

Controller ('myController',function($scope){$scope. OnChange = function(argv){return 'Hello '+argv; }; });Copy the code
Function (scope,ele,attrs){var onChange = scope.$parent.$eval(attrs.onchange); console.log(onChange('World')); // Hello World }Copy the code
Function (scope,ele,attrs){var onChange = scope.$parent.$eval(attrs.onchange); console.log(onChange); // Hello Angular console.log(onChange('World')); // Error }Copy the code

Use ampersand

App.directive ('my-directive',function(){return {scope:{onChange:'&'}, link: function(scope,ele,attrs){//... }}; });Copy the code
Function (scope,ele,attrs){var onChange = scope.onchange; console.log(onChange); // Angular wrapped functions are not console.log(onChange()) in the parent scope; OnChange console.log(onChange()('Directive')); // Final execution result Hello Directive}Copy the code
Function (scope,ele,attrs){var onChange = scope.onchange; console.log(onChange); // Angular wrapped functions are not console.log(onChange('invoke')) in the parent scope; // Final execution result, output 'Hello Hello' instead of 'Hello invoke'}Copy the code

As you can see, if you use & to specify a property as a function in scope, you get a function wrapped by Angular directly from scope, and the value returned by calling this function is the actual binding value on the directive property. If you only want to bind a directly executed function to a directive, something like example 4 is common.

The passing of values when using a function in an instruction

Above we have seen how to use functions. Here is a brief introduction to how to pass values in functions, that is, how to pass values inside instructions through functions.

As shown above [Example 3], you can pass data. This is one way, but it is not very useful because you bind variables instead of functions in the instruction. Here is a better way.

buttonCopy the code

The above code enables the angular onClick function to use the $event parameter to retrieve the click event and operate within the scope of the directive. How do we pass the value inside the directive outside?

Function ($scope,$interval){$scope. OnChange = function(count,timer){$scope. if(count > 9){ $interval.cancel(timer); } console.log('Hello '+ count); }; });Copy the code
link: function(scope,ele,attrs){ var onChange = scope.onChange; var count = 0; var timer = $interval(function(){ onChange({ $argv: count++, $timer: timer }); }, 1000); }Copy the code

The above code will pass the value inside the instruction to the external scope through the function. There aren’t many such scenarios, but they are useful, as in ng-file-upload


       

        Upload on file select
       

Copy the code

This is how the $file object is passed.