Javascript 使用Angular指令使用$scope属性更新DOM-只要指令运行（无需等待事件）

如果你看这把小提琴：

您可以看到，在处理一个订阅的事件之前，指令不会考虑model$scope.bar。您知道一种方法可以让指令在绑定模型时立即识别它吗

            element.keyup(scope.onEdit)
            .keydown(scope.onEdit)
            .focus(scope.onEdit)
            .live('input paste', scope.onEdit);
        element.on('ngChange', scope.onEdit);

---

我会以不同的方式处理整个问题。我不会绑定事件，而是将手表设置为如下长度：

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.bar='something'；
});
app.directive（'myMaxlength'，函数（$compile）{
返回{
限制：“A”，
作用域：{bar:'=ngModel}，
链接：函数（范围、元素、属性）{
var counterElem=angular.element（'剩余字符：{{charsRemaining}}'）；
$compile（counterElem）（范围）；
element.parent（）.append（counterElem）；
范围.$watch(
函数（）{
返回范围.bar.length；
},
函数（newLength）{
scope.charsRemaining=attrs.myMaxlength-newLength；
}
);
}
};
});

您是否尝试了scope.$apply（）？也许我没有很好地表达这个问题。我希望指令能看到控制器中的模型状态并做出相应的反应。正如您在小提琴中看到的，指令没有意识到模型已绑定到元素，因此“Characters remaining”值不会更新。@RodHartzell通过演示查看我的完整答案。应该正是你想要的。太好了！我感谢你的详细答复。我已将此标记为答案。谢谢你。@RodHartzell太棒了！我喜欢角度=D

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

app.controller('myCtrl', function($scope) {
  $scope.bar = 'something';
});

app.directive('myMaxlength', function($compile) {
  return {
    restrict: 'A',
    scope: { bar: "=ngModel" },
    link: function(scope, element, attrs) {
      var counterElem = angular.element('<span>Characters remaining: {{charsRemaining}}</span>');
      $compile(counterElem)(scope);
      element.parent().append(counterElem);

      scope.$watch(
        function() {
          return scope.bar.length; 
        },
        function(newLength) {
          scope.charsRemaining = attrs.myMaxlength - newLength;
        }
      );
    }
  };
});