Need some examples of binding attributes in custom AngularJS tags

Question

I am attempting to create a custom tag similar to the following:

where type is an attribute that gets bound to

Answer 1

Youre pretty close..

app.directive('mytag',function() {
    return {
        restrict: 'E',
        template: '
' +
            '' + 
            'Parent Func' + 
            '
{{controlval}}
' + 
         '
',
        scope: {
            /* make typeattribute="whatever" bind two-ways (=)
            $scope.whatever from the parent to $scope.controltype
            on this directive's scope */
            controltype: '=typeattribute',
            /* reference a function from the parent through
               funcattribute="somefunc()" and stick it our
               directive's scope in $scope.controlfunc */
            controlfunc: '&funcattribute',
            /* pass a string value into the directive */
            controlval: '@valattribute'
        },
        controller: function($scope) {                  
        }
    };
});

  

       
       
       
       {{parenttype}}
  


  app.controller('ParentCtrl', function($scope){ 
       $scope.parenttype = 'FOO';
       $scope.parentFn = function() {
           $scope.parenttype += '!!!!';
       }
  });

The magic is mostly in the scope: declaration in your directive definition. having any scope: {} in there will "isolate" the scope from the parent, meaning it gets it's own scope... without that, it would use the parent's scope. The rest of the magic is in the scope's properties: scope: { 'internalScopeProperty' : '=externalAttributeName' }... where the = represents a two way binding scenario. If you change that = to a @ you'll see it just allows you to pass a string as an attribute to the directive. The & is for executing functions from the parent scope's context.

I hope that helps.

---

EDIT: Here is a working PLNKR