angularJS 이벤트의 표현식을 통한 함수 호출

ng-repeat를 사용하여 만든 버튼을 컨트롤러의 특정 함수에 매핑하려는 경우 문제가 있습니다. 나는이 같은 함수 이름 문자열을 정의하고있다 :angularJS 이벤트의 표현식을 통한 함수 호출

$scope.sections = [ 
{ 
    title: 'Music', 
    desc: 'Some examples of electronic music I have produced using Fl Studio.', 
    color: '#76a86f', 
    icon: 'img/icon/music.png', 
    onClick: 'clickMusic()' 
}];

기능은 다음과 같이 정의한다 :

<div ng-repeat="section in sections"> 
    <div class="sectionThumbnail""> 
     <button ng-click="section.onClick"> 
      <img ng-src="{{ section.icon }}" id="sectionnail_{{$index}}" ng-mouseover="sectionhoverIn($index)" ng-mouseleave="sectionhoverOut($index)"> 
     </button> 
     <div class="sectionthumbnailInfo"> 
      <p class="sectiontitle">{{ section.title }}</p> 
      {{ section.desc }} 
     </div> 
    </div> 
</div>

: 다음

$scope.clickMusic = function() { 
    hideAll(); 
    document.getElementById("musicContent").classList.remove("hide"); 
    document.getElementById("musicContent").classList.add("show"); 
};

그리고이 같은 HTML 버튼에 기능을 매핑 할

그러나 버튼을 클릭해도 아무런 변화가 없습니다. clickMusic() 함수는 웹 페이지의 다른 버튼에 대해 동일한 기능을 사용하므로 일단 실행되면 의도 한대로 작동한다는 것을 알고 있습니다. ng-click = "clickMusic()"처럼 ng-click에서 clickMusic() 함수를 직접 참조 할 때도 작동합니다. 콘솔에서도 오류가 발생하지 않습니다.

이 방법으로 배열의 함수를 참조 할 수있는 방법이 있습니까, 아니면 반복에서 인덱스 인수를 취하여 원하는 함수에 인덱스를 매핑하는 추가 함수를 만들어야합니까?

감사합니다.

출처

2016-09-19 Simon Eliasson

변경 onClick: 'clickMusic()'onClick: clickMusic에 다음과 (당신은 당신이 각 템플릿 내에서 호출 할 함수에 대한 참조 저장 이런 식으로) 단순히 NG를 클릭하는 연료 소모량을 mic4ael의 제안에 <button ng-click="section.onClick()">

출처

2016-09-19 12:02:12 mic4ael

제 경우에는 완전히 정확하지 않지만 $ function.clickMusic()으로 정의되어 있습니다. 귀하의 답변을 기반으로 내 답변을 올렸지 만이 특정 사례에 맞게 답변을 수정하면 정답으로 표시됩니다. 감사합니다. –

감사를 호출합니다. 나는 그것을 알아낼 수 있었다. 컨트롤러의

: 인해 제 기능을

$scope.sections = [ 
{ 
    title: 'Music', 
    desc: 'Some examples of electronic music I have produced using Fl Studio.', 
    color: '#76a86f', 
    icon: 'img/icon/music.png', 
    onClick: $scope.clickMusic 
}];

은 $ 범위가 같이 정의되고 :

$scope.clickMusic = function() { 
    hideAll(); 
    document.getElementById("musicContent").classList.remove("hide"); 
    document.getElementById("musicContent").classList.add("show"); 
};

그리고, mic4ael 제안대로, HTML에서 :

<button ng-click="section.onClick()">

출처

2016-09-19 12:15:26

angularJS 이벤트의 표현식을 통한 함수 호출

답변

관련 문제