пользовательская директива функция не работает angularjs

У меня есть этот кусок кода, но когда пользователь пишет цвет во вводе, цвет фона нового элемента судится для изменения, но не работает, что я делаю неправильно?пользовательская директива функция не работает 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>

источник

2015-05-22 Anne Ortiz

Вы, вероятно, следует закрыть ''

тег, например, 'Hello World

' – Phil

вот подобный пост на SO [создать директиву пользовательских стилей CSS] (http://stackoverflow.com/questions/14318249/stuck-creating -a-custom-css-style-директива) –

Работает отлично для меня (я использовал «красный» для щелчка, чтобы вы могли видеть изменение) ~ http://plnkr.co/edit/0Get13WBrQMy5PuFO4oP?p=preview – Phil

Закройте тег шаблона и удалите встроенный стиль. Кроме того, вы должны использовать 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>

Пожалуйста, для примера типа 'красный' или 'синий'.

источник

2015-05-22 04:02:54 Germando

Где ''? Я подумал, что это важно для приложения OP – Phil

есть ли причина, почему не работает на jsfiddle ?? –

Вы правы, позвольте мне его обновить. – Germando

пользовательская директива функция не работает angularjs

ответ

Смежные вопросы