Edit in JSFiddle

//宣告ng-app
var demoApp = angular.module("demoapp", []);

//ng-app底下掛載ng-controller
demoApp.controller("demoCtrl", function($scope) {
  $scope.name = 'Ryan';
});

//ng-app底下掛載directive
demoApp.directive('introductionDirective', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<p style="color:{{color}}">My name is {{name}}</p>',
    link: function(scope, elem, attrs) {
    	//綁「滑鼠移上事件mouseover」上此元素
      elem.bind('mouseover', function() {
        scope.$apply(function() {
          scope.color = 'red';
        });
      });
      //綁「滑鼠離開事件mouseout」上此元素
      elem.bind('mouseout', function() {
        scope.$apply(function() {
        	scope.color = 'black';
        });
      });
    }
  };
});

<div ng-app="demoapp">
  <div ng-controller="demoCtrl">
    <h1>AngularJs directive link Demo</h1>
    <h3>利用directive的link實做「滑鼠移到文字上會改變顏色」</h3>
    <introduction-directive></introduction-directive>
  </div>
</div>