Creating a Custom Attribute with Angularjs

Creating a custom attribute with AngularJS

Here are two methods... First gets the attribute value through looking at the elements attribute value of your directive. The second gets passed the attribute value and attached to the isolated scope of your directive. Please note I have replaced your controller with a linking function. I suggest you give this article a read: https://docs.angularjs.org/guide/directive

Codepen: http://codepen.io/anon/pen/cGEex

HTML:

<div ng-app="myApp">
  <div effect-color-one="#123456"></div>
  <div effect-color-two="#123456"></div>
</div>

JavaScript:

angular.module('myApp', [])
.directive('effectColorOne', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        console.log('example 1: ' + attrs.effectColorOne);
      }
    }
  }
)
.directive('effectColorTwo', function () {
    return {
      restrict: 'A',
      scope: {
        effectColorTwo: '@'
      },
      link:function (scope) {
        console.log('example 2: ' + scope.effectColorTwo);
      }
    }
  }
);

Another example
combining the above example and the ability to change the background colour of the element which the directive attribute resides is below:

Codepen: http://codepen.io/anon/pen/HospA

HTML:

<div ng-app="myApp">
  <div effect-color="red">Hello</div>
</div>

JavaScript:

angular.module('myApp', [])
.directive('effectColor', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.css('background-color', attrs.effectColor);
      }
    }
  }
);

How do you add a custom attribute-class through angularjs

I solved it like this:

After changes:

<button id="monitorBtn-{{machine.id}}" class="btn btn-success machine-action-btn"
                ng-class="{'activeBtn': machine.isMonitored, 'btn-disabled': !$ctrl.hasValidMachineConfigAndBatch(machine)}"
                ng-click="$ctrl.monitorClick(machine);"
                ng-disabled="!$ctrl.hasValidMachineConfigAndBatch(machine)">
     <span ng-show="!$ctrl.isMonitored(machine)">
                StackOverFlow
     </span>
</button>

JS:

hasValidMachineConfigAndBatch(machine: Machine): boolean {
    var element = angular.element("#monitorBtn-"+machine.id);
    if (_.isNil(machine.currentMachineConfig) || _.isNil(machine.currentBatch)){
        element.attr("tooltip","Your Tooltip Text");
        element.attr("flow","up");
        console.log(element);
        return false;
    }
    element.removeAttr("tooltip");
    element.removeAttr("flow"); 
    return true;
}

Angular JS - bind a custom html attribute

You first need to set a name for your select:

<select name="colors" ng-model="$ctrl.colors">
   <option value="1" data-custom1="paymentA">1</option>
   <option value="2" data-custom1="paymentB">2</option>
   <option value="3" data-custom1="paymentC">3</option>
</select>

Then, you can create a method in your ctrl which returns the data-custom1 attribute from the selected option:

$ctrl.getDataCustomFromSelect = function(selectName) {
  return document.querySelector('select[name="' + selectName + '"] option:checked')
    .getAttribute('data-custom1');
}

You can get that in your template doing:

<p ng-bind="$ctrl.getDataCustomFromSelect('colors')"><p>

Fiddle with that solution: https://jsfiddle.net/virgilioafonsojr/b002ccja/

I hope I understood your problem correctly and it solves the issue.

AngularJS: How to set an attribute to a custom directive

Go Angular :-)

You don't need the use of jQuery here. Angular is sufficient enough. You can change your code like this:

In your View:

<keybuddy model="myInputText"></keybuddy>

<button ng-click="showText()">Show Text</button>

In your View controller:

$scope.showText = function() {
    console.log($scope.myInputText);
}

And update your directive to have scope like below (replace your `scope: true):

scope: {
    inputText: '=model'
}

Read more on Isolating scope of a directive

Angular 1.x - creating custom attribute directives with assignment

You can have both named same,

app.directive('myCustomAttribute', function() {
    return {
        restrict: 'A',
        scope: {
            myCustomAttribute: '='
        },
        templateUrl: '...'
    };
});

which can be used as,

<div my-custom-attribute="somevalue"></div>

sample working example

Angularjs: custom two-way binding attribute directive

I finally managed to get it working. Here's my solution :

var app = angular.module('myApp', []);app.controller('myctrl', function ($scope) {  var vm = this;  vm.mymodel = 'Hello world !';  vm.changeModel = function() {    vm.mymodel = 'New Value'    console.log(document.getElementById('myinput'))  }  vm.changeAttribute = function() {    document.getElementById('myinput').setAttribute('data-value', '123456789');    console.log(document.getElementById('myinput'))  }});
app.directive('mydirective', function ($timeout, $interval) {  return {    restrict: 'A',    replace: false,    transclude: false,    scope: {      propbind: '@',      model: '='    },    link: function (scope, elem, attr) {      attr.$set(scope.propbind, scope.model);
      //Watch model for changes, and update attribute      scope.$watch(function () {        return scope.model      }, function () {        attr.$set(scope.propbind, scope.model);      });
      //Watch for changes in attribute, and update model      scope.$watch(function () {        return elem[0].getAttribute(scope.propbind);      }, function (value) {        $timeout(function () {          scope.model = value;        });      });
      //Get attribute value for angularjs to reevaluate dom      $interval(function () {        var val = elem[0].getAttribute(scope.propbind)      }, 100);    }  }});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myctrl as vm">  <input id="myinput" mydirective propbind="data-value" model="vm.mymodel" type="text"/>  model value : {{vm.mymodel}}  <div>  <button ng-click="vm.changeModel()">change model value</button>  <button ng-click="vm.changeAttribute()">change model value</button>  </div>  {{document.getElementById('myinput')}}</div>

AngularJS custom attribute does not evaluate first time directive runs

As it turns out the controller and controllerAs properties were having an effect on this. I removed it, but then decided I would rather have the controller so instead I used isolate scope to evaluate the object instead of reading it from the attr property.

---

Related Topics