Как добавить угловые атрибуты к динамически генерируемому элементу с функцией в качестве параметра? - PullRequest
Новая
       0

Как добавить угловые атрибуты к динамически генерируемому элементу с функцией в качестве параметра?

0 голосов
/ 27 июня 2019

Я относительно новичок в JavaScript и AngularJS.

Я пытался добавить атрибут 'ng-click' к элементу ссылки с функцией в качестве параметра, используя следующий код: 

var aTag1 = document.createElement('a');               
aTag1.setAttribute('ng-click', "setID(" + response.data[i].resultID + ")");

Кажется, JavaScript подтверждает, что атрибут был добавлен к элементу, но функция не запускается при нажатии на ссылку. Я уверен, что есть простой ответ, но по какой-то причине я не смог его найти.

Ответы [ 2 ]

1 голос
/ 27 июня 2019

Когда вы создаете элемент и устанавливаете атрибуты, используя ваш метод, скомпилируйте новый контент, используя $compile, а затем добавьте. 

var aTag1 = document.createElement('a');
aTag1.innerHTML = 'testing'
aTag1.setAttribute('ng-click', "setID(" + "'test'" + ")");
var test = $compile(aTag1)(scope);
element.append(test);

Пожалуйста, проверьте приведенный ниже рабочий пример, эта логика также должна выполняться внутри угловой директивы, так как мы модифицируем элемент. 

angular.module('components', []).directive('helloWorld', function($compile) {
  return {
    restrict: 'E',
    scope: {
      name: '='
    },
    template: '<span>Hello {{name}}</span>',
    link: (scope, element, attrs) => {
      var aTag1 = document.createElement('a');
      aTag1.innerHTML = 'testing'
      aTag1.setAttribute('ng-click', "setID(" + "'test'" + ")");
      var test = $compile(aTag1)(scope);
      element.append(test);
      scope.setID = function(value) {
        console.log(value);
      }
    }
  }
})

angular.module('myApp', ['components']).controller('myctrl', ['$scope', function($scope) {
  $scope.name = 'test';
}]);
.ng-scope {
  border: 1px red solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller='myctrl'>
  <hello-world name="name"></hello-world>
  <div>
0 голосов
/ 27 июня 2019

FYI Пример установки атрибута, удаление атрибута 

<!DOCTYPE html>
<!DOCTYPE html>
<html ng-app="" ng-controller="myCtrl">
<body>
<button ng-click="getAttr()">
  Get Attribute value
</button>
<br/>
<button ng-click="setAttr()">
  Set Attribute value
</button>
<br/>
<button ng-click="removeAttr()">
  Remove Attribute value
</button>
<br/>
<div myattr="val" id="divID">
  Attribute DIV
</div>
<script>
function myCtrl($scope) {
    $scope.getAttr = function() {
     var myEl = angular.element( document.querySelector( '#divID' ) );
     alert(myEl.attr('myattr'));
    }
    $scope.setAttr = function() {
     var myEl = angular.element( document.querySelector( '#divID' ) );
     myEl.attr('myattr',"attr val");
     alert("attribute set");
    }
    $scope.removeAttr = function() {
     var myEl = angular.element( document.querySelector( '#divID' ) );
     myEl.removeAttr('myattr');
     alert("attribute removed");
    }
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...