自定义指令功能不起作用答案

【问题标题】：custom directive function not working angularjs自定义指令功能不起作用
【发布时间】：2015-05-22 03:19:54
【问题描述】：

我有这段代码，但是当用户在输入中写入颜色时，新元素的背景颜色应该改变但不起作用，我做错了什么？

<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>

【问题讨论】：

你应该关闭<p>标签，例如Hello World</p>
这是creating a custom css style directive上的类似 SO 帖子
对我来说很好用（我用“红色”作为点击，这样你就可以看到变化）~plnkr.co/edit/0Get13WBrQMy5PuFO4oP?p=preview

标签： angularjs apply directive

【解决方案1】：

关闭你的模板标签并从那里删除内联样式。你也应该使用 elem.on() 而不是 elem.bind()

var mainApp = angular.module("mainApp", []);

      mainApp.directive('helloWorld', function() {
         return {
    restrict: 'AE',
    template: '<input type="text" placeholder="Enter a color" ng-model="color"/><p>Hello World</p>',
    link: function(scope, elem, attrs) {
      scope.color = elem.find('input').val();
      scope.$watch('color', function(newVal, oldVal){
        if(oldVal === newVal) return;
    
        elem.find('p').addClass(scope.color +'');
        
      });
      elem.on('mouseover', function() {
        elem.find('input').css('cursor', 'pointer');
      });
    }
  };
});

.red {
  background-color: red;
  }
.blue {
  background-color: blue;
  }

<!doctype html>
  <html ng-app="mainApp">
    <head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
      </head>
    <body>
      <hello-world></hello-world>
      </body>
    </html>

请在示例中输入“红色”或“蓝色”。

【讨论】：

<input> 在哪里？我认为这对 OP 的应用程序至关重要
您可以在我的代码底部单击蓝色按钮“运行代码 sn-p”来测试它。