First Time Writing An Angular Directives And Returning A Compiled Template

I am trying to write my first directive and am a bit confused. I would like to return a compiled template where the ng-click is functional. I have (http://plnkr.co/edit/gr3ha1lxgcF

Solution 1:

The problem you are having, which is not clear in your code above is that you're overwriting the controller that has the click function defined.

You have this twice in your code: arcModule.controller('MainCtrl', function($scope) {

All I did to make your directive work was remove the second controller definition so that the first one with the click function is used (you really just need to combine them). Then added <div my-customer></div> to the DOM. The directive kicked in and added the directive markup and the click function worked properly.

Here's your full code corrected: Live demo (click).

JavaScript:

var arcModule=angular.module('Octo', []);

arcModule.controller('MainCtrl', function($scope, $http){
  $scope.sayHello=function(){
    alert("hello");
  }
  $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
  };
});  

arcModule.directive('myCustomer', function() {
  return {
    template: 'Name: {{customer.name}}<button ng-click="sayHello()">Click to say hello.</button> Address: {{customer.address}}'
  };
});

Markup:

<bodyng-app="Octo"ng-controller="MainCtrl"><divmy-customer></div>