2016-09-02 15 views
1

Ich weiß, wie es als ohne Controller zu tun:Zugriff auf Attribut-Richtlinie Werten Controller als

html
Nehmen wir an, ich habe eine Richtlinie namens 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 
     }) 
    } 
    }; 
}) 

Wie zu die Direktive machen, wenn ich sowas verwende?

<div ng-controller="myControl as ctl" > 
<input type="text" ng-upper-case="ctl.isGiant" > 
</div> 
+0

Was Sie haben, sollte funktionieren. Welche Probleme haben Sie? – georgeawg

+0

es immer zurück undefiniert, wenn Sie "controller as" verwenden – anaval

+0

teilen Sie Ihre Contrler Code, wie Sie den Controller definiert? Und stattdessen können Sie Scope-Variable direkt in Direktive als Attribut übergeben. –

Antwort

0

Da es nicht ganz klar ist, was Sie erreichen wollen, hier ist ein Beispiel für das, was ich verstehe, was Sie brauchen: einen Eingangswert auf Groß- und Kleinschreibung zu ändern auf einer Variablen abhängig:

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 as 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>

Verwandte Themen