sourcecode

Angularjs 동적으로 설정된 속성

copyscript 2023. 2. 11. 09:31
반응형

Angularjs 동적으로 설정된 속성

angular js에서 컨트롤러의 div에 속성을 동적으로 추가하려고 합니다.

 var table = document.getElementById("div_id").setAttribute("ng-click", "function_name()");
 $scope.$apply();

모든 것이 정상으로 보입니다. 디버거에서 속성이 추가되었지만 기능을 실행하지 않습니다.기존 div에 속성을 추가하는 방법 및 작동 방법을 알고 계십니까?

div를 다시 컴파일해야 합니다.

var el = angular.element("div_id");
$scope = el.scope();
$injector = el.injector();
$injector.invoke(function($compile){
   $compile(el)($scope)
})

http://jsfiddle.net/r2vb1ahy/

ID별로 요소를 가져오고 새 특성 및 값 설정

 var el =angular.element('#divId');
 el.attr('attr-name', 'attr-value');

속성을 동적으로 설정하려면

var myEl = angular.element(document.querySelector('#divID'));
myEl.attr('myattr',"attr val");

속성 값을 가져오려면 사용

var myEl = angular.element( document.querySelector('#divID'));
alert(myEl.attr('myattr'));

속성 사용 제거 방법

var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.removeAttr('myattr');

Angular2는 다음을 제공합니다.[attr.<attribute name>]Atribute 값을 지정합니다.

<div id="divID" [attr.role]="roleVal">
  This text color can be changed
</div>

컴포넌트 클래스:

  addAttr() {
    this.roleVal = 'admin';
  }

  removeAttr() {
    this.roleVal = '';
  }

  checkAttr() {
    alert(this.roleVal);
  }

http://blog.sodhanalibrary.com/2016/02/set-attribute-and-remove-attribute-with.html 에서

언급URL : https://stackoverflow.com/questions/25759497/angularjs-dynamically-set-attribute

반응형