1

基本上我正在创建一个字符计数器，它有 2 个输入字段来填写模板。问题是其中 1 个字段是可选的，并且如果选中，则具有添加到字符计数的样板文本。所以我最大的问题是在两个输入区域中获取字符串的长度。模型更改时，渲染方法未运行。我很困惑为什么会这样。

var $scope;
var app = angular.module('miniapp', []);

function Ctrl($scope) {
    $scope.form = {}
}

app.directive('charcount', function(){
    return {
        restrict: 'E',
        require: 'ngModel',
        link: function (scope, el, attrs, controller){
            controller.$render = function(){
                var data = controller.$modelValue
                var codeLen = 0, descLen = 0;
                if (data.code){
                  codeLen = data.code.length
                }
              if (data.desc){
                descLen = data.desc.length
              }  
                console.log(descLen, codeLen);                      
            }            
        }
    }
})

小提琴：http: //jsfiddle.net/dj6mX/481/

4

1 回答 1

1

我从未使用过$render但我使用 ng-change 在textInput上调用函数并创建countChange函数来计算文本长度。

HTML 中的示例

<div ng-app="miniapp">
  <div ng-controller="Ctrl">
    <form>
      <label for="desc">Description</label>
      <textarea ng-change="countChange()" id="desc" ng-model="form.desc"></textarea>
      <charcount ng-model="form">
      <label for="code">Code</label>
      <input id="code" ng-change="countChange()" ng-model="form.code"/>               
    </form>
    <p id="preview">Some filler text here user input {{form.desc}}
      <span ng- show="form.code">
        Some optional text here plus code {{form.code}}
      </span>
    </p>
  </div>
</div>​

在指令中

var app = angular.module('miniapp', []);

function Ctrl($scope) {

}

app.directive('charcount', function(){
    return {
        restrict: 'E',
        require: 'ngModel',
          controller: function($scope) {            
                $scope.countChange= function() {
                    var codeLen = 0;
                    var descLen = 0;                     
                    if($scope.form.desc){
                    descLen = $scope.form.desc.length;
                    }
                    if($scope.form.code){
                    codeLen = $scope.form.code.length;
                    }
                   console.log(codeLen,descLen);     
                }

            },        
        link: function (scope, el, attrs, controller){

        }       
 }})

对不起，我的英语不好，但我希望这会对你有所帮助。XD

于 2012-12-12T15:53:39.583 回答