Dzorogh July 6, 2014 at 18:14

Subtleties of AngularJS: select inside the directive template

This article will describe the solution to one specific problem, as well as an example to show how $ transclude works.

The task is this: to make a directive, a wrapper for select. Suppose that we want to add both a select and a label to it with one tag at a time (then we can add filling errors there, but for simplicity we will not do this). In general, at first glance everything looks simple.

Let's make a directive and call it field. We will use it like this:

We came up with several attributes:

title - field name
type - Field type (we will only have select, but suddenly then ...)
ng-model - A variable that stores the selected value
options - To specify a list for the select we will use the syntax of Anglar's ngOptions

Note that the variables selectedColor, and colorsin the example, the variables scope in which we used the directive. We specifically specified them through the attributes so that the directive gets access to them.

Directive Code:

angular.module('directives').directive('field', function () {
return {
	//директива - это название тега
	restrict: 'E', 
	// то, что мы передали в директиву
	scope: {
		ngModel: "=", 
		title: "@",
		type: "@",
		options: "@"
	},
	// адрес шаблончика
	templateUrl: '/tpl/fields/select.html',
});

Template Code:

{{title}}

Live: codepen.io/Dzorogh/pen/umCKG?editors=101

It seems that everything looks simple and should work. Run, check in the debugger -

Цвет

It seems not bad ... but where are all the options? Why are colors empty (or rather, undefined)?

The fact is that when we specify the scope parameter in the directive, the entire body of the directive turns into a stone wall - isolate scope. This isolated scope does not allow those inside to see external scope. But, accordingly, all those variables ( ngModel, type, title, options) that we specified for the directive parameter will be added to our isolated scope and “bound” to external variables.

And here we can see the problem - we did not add colorsto those variables. And rightly so, the directive, of course, should not know what kind of array we want to use there. We have already indicated that we use this array by writing it in the options attribute.

To access the array, we must at least know the name of the variable. Therefore, the best option is to parse options. The source code of angular.js helps us here, there is a regularity for ngOptions there.

But wait, even after getting the variable name from the outer scope, how can we add it inside?

Actually, the most interesting

To bind external variables with internal ones after directive initialization, you need to use such a thing as "$ transclude". Calling this function gives access to an external scope and you can simply get any variable from there and “pass” directives to the scope.

New directive, with regular and transclude:

.directive('field', function() {
  // позаимствовано из исходников angularjs
  var NG_OPTIONS_REGEXP = /^\s*(.*?)(?:\s+as\s+(.*?))?(?:\s+group\s+by\s+(.*))?\s+for\s+(?:([\$\w][\$\w]*)|(?:\(\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*\)))\s+in\s+(.*?)(?:\s+track\s+by\s+(.*?))?$/;
  };
  return {
    restrict: 'E',
    scope: {
      ngModel: "=",
      type: "@",
      title: "@",
      options: "@"
    },
    // "Включаем" возможность использовать трансклюд
    transclude: true,
    templateUrl: '/fields/select.html',
    // $transclude всегда идет 5м параметром.
    link: function (scope, element, attrs, controller, $transclude) {
      if (scope.type == 'select') {
        // Парсинг названия массива значений
        var parsedOptions = attrs.options.match(NG_OPTIONS_REGEXP);
        // убираем фильтры (они пишутся после | )
        var optionsArray = /^(.*) \|/.exec(parsedOptions[7]) || parsedOptions[7];
        // optionsArray - название (только название) массива, в котором содержится список значений.
        // чтобы получить к нему доступ, нужно взять его из общего Scope
        // (того, где появилась директива) и добавить в наш.
        $transclude(function (clone, $outerScope) {
          scope[optionsArray] = $outerScope[optionsArray];
        });
      }
    } 
  }
});

Final option in CodePen: codepen.io/Dzorogh/pen/gBbyI

Tags:

Subtleties of AngularJS: select inside the directive template

Actually, the most interesting

Also popular now: