AngularJS - Defining Custom Directives Part IV

AngularJS custom directives series previous articles:

• AngularJS - Define a basic Custom Directive
• AngularJS - Defining Custom Directives - Part II
• AngularJS - Defining Custom Directives Part III

In this post I will discuss isolate scope with local scope properties.

To interact with outside world while using isolated scope, angular provides three options which are known as Local Scope Properties, and used with @,= and & characters.

The local scope option @ is used to access string values that defined outside the directive scope. It can be understand as a function accepting a single string parameter. In the following directive example scope is received a string variable and named it as myLocalName inside directive scope (although you can use the same name as passed through directive, but here I used a different name to make it more clear).

demoApp.directive('directiveWithIsolateScopeRecevingStringParameter1', function () {
 return {
  scope: {
   myLocalName: '@'
  },
  template: 'Item name received from parameter: name = {{myLocalName}}'
 };
});

Directive Implementation:

Note that the attribute name we used here, is following the same naming scheme as we used while defining custom directive, i.e. camelCase. In my-local-name attribute we are passing a string item.name from controller's property. We can also use different names inside directive scope and directive implementation, look at this example:

demoApp.directive('directiveWithIsolateScopeRecevingStringParameter2', function () {
 return {
  scope: {
   myLocalName2: '@myLocalName'
  },
  template: 'Item name received from parameter: name = {{myLocalName2}}'
 };
});

Directive Implementation:

Here in implementation we define attribute named my-local-name, but inside directive scope we are using different name my-local-name2.

Values passed by @ option is not sync with outside scope, i.e. if item.name value changes from outside of directive then directive get updated value, but if the value is being changed inside the directive scope then item.name property will not be affected.

If you want two-way binding then you have to use second scope option '=' character, it will keep the directive variable in-sync with outside world. Example:

demoApp.directive('directiveWithIsolateScopeBindedToObject', function () {
 return {
  scope: {
   myBindedItem: '='
  },
  template: 'Item from isolate scope binded to object in parent controller: name = {{myBindedItem.name}}, category = {{myBindedItem.category}} '
 };
});

Directive Implementation:

The last scope binding option & is used to bind external functions. You can think of it as accepting a function delegate, then you can call it like a regular function. For example we can pass a function name, of the controller, which we want to be called on some specific event e.g. click event. When you click an element of the directive, it will call that external function, and controller can define its own logic being invoked from inside the directive.

demoApp.directive('directiveWithIsolateScopeCallingParentFunction', function () {
            return {
                scope: {
                    myFunction: '&'
                },
                template: 'Click this button, it will call a function in parent controller:  '
            };
        });

Directive Implementation:

Here we are passing a function name doSomeWork() in the attribute my-function, and within the directive scope we are accepting this function with & option in our local variable myFunction. Then we are calling this function from the click event of the button defined in the template content of directive.