javascript - accessing attribute directive values using controller as -


i know how without controller as:

html
let's assume have directive named nguppercase(either true or false)

<div ng-controller="mycontrol" >  <input type="text" ng-upper-case="isgiant" > </div> 

js

myapp.directive('nguppercase',function(){   return{      restrict:'a',      priority:0,      link:function($scope,element,attr){          //---to retrieve value          var val = $scope[attr.nguppercase];          var anotherval = $scope.$eval(attr.nguppercase);          $scope.$watch(attr.nguppercase,function(val){             //---to watch          })      }   }; }) 

how make directive if i'm using this?

<div ng-controller="mycontrol ctl" >  <input type="text" ng-upper-case="ctl.isgiant" > </div> 

since it's not clear want achieve, here example of doing understand need: changing input value upper or lower case depending on variable:

function nguppercase() {    return{       restrict:'a',       priority:0,       link:function($scope,element,attr){           //---to retrieve value           var val = $scope[attr.nguppercase];           var anotherval = $scope.$eval(attr.nguppercase);           $scope.$watch(attr.nguppercase,function(val){              if(val) {                element[0].value = element[0].value.touppercase();              } else {                element[0].value = element[0].value.tolowercase();              }           })       }    }  }  function mycontroller() {    this.isgiant = true;  }  angular.module('myapp', []);  angular      .module('myapp')      .controller('mycontroller', mycontroller)      .directive('nguppercase', nguppercase);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>  <div ng-app="myapp">    <div ng-controller="mycontroller ctl" >      <a href="" ng-click="ctl.isgiant = false">lower case</a><br>      <a href="" ng-click="ctl.isgiant = true">upper case</a>      <input type="text" ng-upper-case="ctl.isgiant" value="testing123" >    </div>  </div>


Comments