Question

我知道怎么做没有控制器：

HTML
我们假设我有一个名为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
         })
     }
  };
})

如果我使用这样的东西，如何制定指令？

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

Answer 1

由于它不是很清楚你想要实现什么，这里有一个做我理解你需要的例子：根据变量将输入值改为大写或小写：

＆＃13;

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);

＆＃13;

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

＆＃13;

使用controller作为访问属性指令值

1 个答案: