간단한 AngularJs 사용자 정의 지시문이 작동하지 않습니다.

저는 AngularJS를 처음 사용하며 작동하지 않는 아주 간단한 샘플을 가지고 있습니다. 나는 누군가가 내가 무엇을 놓쳤는 지 말할 수 있기를 바라고있다. 클릭하면 입력 마우스와 HTML을 변경에 색상을 변경하도록되어 :간단한 AngularJs 사용자 정의 지시문이 작동하지 않습니다.

http://plnkr.co/edit/fQ5nejywl1taPSpZuBVv?p=preview

index.html을 :

<!doctype html> 
<html ng-app="app"> 

<head> 
    <script data-require="[email protected]" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body> 
    <div my-dom-directive>Click me!!</div> 
</body> 

</html>

script.js

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

(function(){ 

    var directive = function() { 
    return { 
     link: function($scope, element, attrs) { 
     element.bind('click', function() { 
     element.html('Clicked I am!'); 
     }); 

     element.bind('mouseenter', function() { 
      element.css('background-color', 'yellow'); 
     }); 

     element.bind('mouseleave', function() { 
      element.css('background-color', 'white'); 
     }); 
     } 
    }; 
    }; 

    angular.module('app').directive('myDomDirective', directive); 
})

을 전하면 자체 호출 메소드를 사용하여 지시문을 추가하지 마십시오. 올바르게 작동합니다.

감사합니다.

출처

2014-07-20 Jim Balo

이 문서에 따르면 함수 호출 –

은 자기 INV를 호출 시도 oking 기능. 나는 결국().

또는 대안 :

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

(function(module){ 

    var directive = function() { 
    return { 
     link: function($scope, element, attrs) { 
     element.bind('click', function() { 
     element.html('Clicked I am!'); 
     }); 

     element.bind('mouseenter', function() { 
      element.css('background-color', 'yellow'); 
     }); 

     element.bind('mouseleave', function() { 
      element.css('background-color', 'white'); 
     }); 
     } 
    }; 
    }; 

    module.directive('myDomDirective', directive); 
})(app);

두 번째 방법은 당신에게 매개 변수를 자동 호출 기능 등의 모듈에 전달합니다.

출처

2014-07-20 20:21:45 pixelbits

자체 호출 기능을 호출하지 않습니다. 함수 정의의 끝에서 '()'를 호출하여 현재 괄호 안에 감싸는 것처럼 호출 할 수 있습니다.

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

(function(){ 

    var directive = function() { 
    return { 
     link: function($scope, element, attrs) { 
     element.bind('click', function() { 
     element.html('Clicked I am!'); 
     }); 

     element.bind('mouseenter', function() { 
      element.css('background-color', 'yellow'); 
     }); 

     element.bind('mouseleave', function() { 
      element.css('background-color', 'white'); 
     }); 
     } 
    }; 
    }; 

    // you could just use closure here as the app variable is available 
    app.directive('myDomDirective', directive); 
}());

출처

2014-07-20 20:14:59 Jon

지시어 (내가 가지고있는 점을 볼 수 없습니다)를 포장하는 기능을 제거하고 또한이 지침이 생성되는 방법을 알 (사용 응용 프로그램 .directive (...) 직접) :

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


    var directive = function() { 
    return { 
     link: function($scope, element, attrs) { 
      element.bind('click', function() { 
       element.html('Clicked I am!'); 
      }); 

      element.bind('mouseenter', function() { 
       element.css('background-color', 'yellow'); 
      }); 

      element.bind('mouseleave', function() { 
       element.css('background-color', 'white'); 
      }); 
     } 
    }; 
    }; 

    app.directive('myDomDirective', directive);

또는 당신이 지시를 선언 할 특별한 이유가없는 한 별도로 같은 더 나은 될 것입니다 :

app.directive('myDomDirective',function() { 
     return { 
       ... 
      } 
     });

출처

2014-07-20 20:16:36

을 놓친, 그것은 전역에서 물건을 유지하기 위해 유용한 패턴은 다음과 같습니다 http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part -i-the-fundamentals이지만,이 경우에 차이가 있는지 확실하지 않습니다. –

간단한 AngularJs 사용자 정의 지시문이 작동하지 않습니다.

답변

관련 문제