0

Given 3 elements with the same ng-style attribute, is there any way to control which element actually be affected by ng-style? The scenario is as follows: User can interact with elements on the screen. Upon selecting an element (by clicking it), the user can control its width, x,y position, using inputs connected to the ng-style by ng-model. Each element has a different ID that is passed to the ngclick function (1,2 or 3)

  $scope.selectClickedElm = function(elm){
        console.log(elm);
        clickedElement = elm;
      //enable ng-style for element with the selected ID (1\2\3)
  }

function createAndAppend(element){
    var element;
   if(creationObject[element]==true){
   }else{
    if(element =="input"){
        element = angular.element("<"+element+" id='inputTag' ng-click='selectClickedElm(1)' ng-style='{width: w + \"px\",top: t + \"px\",left: l + \"px\"}' placeholder='input'>");
        angular.element(document.getElementById('board')).append($compile(element)($scope));
    }else if(element =="label"){
        element= angular.element("<"+element+" id='labelTag' ng-click='selectClickedElm(2)' ng-style='{width: w + \"px\",top: t + \"px\",left: l + \"px\"}'>{{txt || 'Label'}}</"+element+">");
        angular.element(document.getElementById('board')).append($compile(element)($scope));
    }else{
        element= angular.element("<"+element+" id='buttonTag' ng-click='selectClickedElm(3)' ng-style='{width: w + \"px\",top: t + \"px\",left: l + \"px\"}'>{{txt || 'Button'}}</"+element+">");
        angular.element(document.getElementById('board')).append($compile(element)($scope));
    }
   }
}
Alex
  • 1,982
  • 4
  • 37
  • 70
  • Take a look at this: https://stackoverflow.com/questions/19375695/angular-ng-style-with-a-conditional-expression, second answer – lealceldeiro Jan 23 '18 at 23:23
  • This sort of thing should all be done as directive. All that dom querying and manipulation just goes against angular methodology and certainly doesn't belong in a controller – charlietfl Jan 24 '18 at 00:51

0 Answers0