自定义指令函数不工作angularjs

我有这段代码，但当用户在输入中写入颜色时，新元素的背景颜色会发生变化，但不起作用，我做错了什么

<div ng-app="mainApp" ng-controller="MainCtrl">
         <input type="text" ng-model="color" placeholder="Enter a color" />
         <hello-world/>
   </div>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   <script>
      var mainApp = angular.module("mainApp", []);

      mainApp.directive('helloWorld', function() {
         return {
    restrict: 'AE',
    replace: true,
    template: '<p style="background-color:{{color}}">Hello World',
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        elem.css('background-color', 'white');
        scope.$apply(function() {
          scope.color = "white";
        });
      });
      elem.bind('mouseover', function() {
        elem.css('cursor', 'pointer');
      });
    }
  };
});
 </script>

var mainApp=angular.module（“mainApp”，[]）；
mainApp.directive（'helloWorld'，function（）{
返回{
限制：“AE”，
替换：正确，
模板：“
Hello World”，
链接：功能（范围、要素、属性）{
元素绑定（'单击'，函数（）{
元素css（“背景色”、“白色”）；
作用域$apply（函数（）{
scope.color=“白色”；
});
});
元素绑定（'mouseover'，function（）{
元素css（“光标”、“指针”）；
});
}
};
});

关闭模板标记并从中删除内联样式。 您还应该使用elem.on（）而不是elem.bind（）

var mainApp=angular.module（“mainApp”，[]）；
mainApp.directive（'helloWorld'，function（）{
返回{
限制：“AE”，
模板：“Hello World
”，
链接：功能（范围、要素、属性）{
scope.color=elem.find（'input'）.val（）；
范围：$watch（'color'，函数（newVal，oldVal）{
如果（oldVal==newVal）返回；
元素find（'p'）.addClass（scope.color+“”）；
});
元素on（'mouseover'，function（）{
元素find（'input'）.css（'cursor'，'pointer'）；
});
}
};
});
.red{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}

您可能应该关闭
标签，例如
Hello World
这里有一个类似的SO帖子，对我来说很好（我用“红色”表示点击，以便您可以看到更改）~
在哪里？我认为这对于OP的应用程序来说是必不可少的。你只需点击我代码底部的蓝色按钮“RunCodeSnippet”就可以测试它。