IT

ng-click으로 DOM 개체에 참조 전달

itgroup 2023. 3. 19. 18:05
반응형

ng-click으로 DOM 개체에 참조 전달

ng-click에서 동일한 콜백을 가진 요소가 여러 개 있습니다.

<button ng-click="doSomething()"></button>
<button ng-click="doSomething()"></button>
<button ng-click="doSomething()"></button>
<button ng-click="doSomething()"></button>
// In controller:
$scope.doSomething = function() {
  // How do I get a reference to the button that triggered the function?
};

do Something 호출을 한 객체에 대한 참조를 가져오려면 어떻게 해야 합니까? (그 객체에서 속성을 삭제해야 합니다.)

엄밀히 말하면 다음과 같습니다.

<button ng-click="doSomething($event)"></button>
// In controller:
$scope.doSomething = function($event) {
  //reference to the button that triggered the function:
  $event.target
};

이건 앵귤러로서 하기 싫은 일일 거예요.JS 철학은 모델 조작에 초점을 맞추고 Angular를JS는 선언형 UI의 힌트를 기반으로 렌더링을 수행합니다.컨트롤러에서 DOM 요소 및 속성을 조작하는 것은 Angular에서는 절대 안 됩니다.JS월드

상세한 것에 대하여는, https://stackoverflow.com/a/12431211/1418796 를 참조해 주세요.

각도 방법은 각도 문서에 나와 있습니다.

https://docs.angularjs.org/api/ng/directive/ngReadonly

다음으로 사용하는 예를 제시하겠습니다.

<body>
    Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
    <input type="text" ng-readonly="checked" value="I'm Angular"/>
</body>

기본적으로 각도 방법은 입력이 읽기 전용인지 여부를 유지하는 모델 개체를 만든 다음 그에 따라 해당 모델 개체를 설정하는 것입니다.앵글의 장점은 대부분의 경우 돔 조작을 할 필요가 없다는 것입니다.모델이 설정된 방식으로 뷰를 각도 렌더링만 하면 됩니다(각도가 돔 조작을 수행하고 코드를 깨끗하게 유지).

따라서 기본적으로 다음과 같은 작업을 수행하거나 이 작업 예를 확인하십시오.

<button ng-click="isInput1ReadOnly = !isInput1ReadOnly">Click Me</button>
<input type="text" ng-readonly="isInput1ReadOnly" value="Angular Rules!"/>

언급URL : https://stackoverflow.com/questions/17240411/pass-a-reference-to-dom-object-with-ng-click

반응형