javascript - watch 在 angularJs 中的指令链接内不起作用

Question

当出现错误消息时，保存按钮应该被禁用

<user-textbox name="txtbox" error-Message="errormsg"></user-textbox>
<button  id="modalSaveButton" type="button" ng-click="save()" data-dismiss="{{ errormsg ? '' : 'modal' }}" value="Save"></button>

指令

            link(scope) {   
                        scope.errormsg = false;
                        function disableSave (n, o) {
                          const eleModalSave = 
                                angular.element(document.querySelector('#modalSaveButton'));
                                if(scope.errormsg) {
                                   eleModalSave.attr('disabled',"");
//save button should get disable if errormsg is true
                                } else {
                                   eleModalSave.removeAttr('disabled');
                                }
                        }

                        scope.$watch('errormsg',disableSave, true);
                    }

O/P:即使出现错误，保存按钮也不会被禁用

Answer 1

因此在您编写的指令标记中:

<user-textbox name="txtbox" error-Message="errormsg"></user-textbox>

能否请您在标记中将属性名称更改为错误消息。所以它看起来像:

<user-textbox name="txtbox" error-message="errormsg"></user-textbox>

Angular 会将作用域上的这个翻译成 $scope.errorMessage，这意味着您的指令声明应如下所示:

.directive('userTextbox', function(){
  scope : {
     errorMessage :'='
  },
  link : ['$scope', function($scope){
      $scope.$watch('errorMessage', function(newVal, oldVal) {

     })]
  }
})