Angularjs 如何在指令中进行我自己的ng更改和ng模型？_Angularjs_Angularjs Directive

Angularjs 如何在指令中进行我自己的ng更改和ng模型？

angularjs

Angularjs 如何在指令中进行我自己的ng更改和ng模型？,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我正在尝试用自己的model和change属性实现一个指令（作为ng model和ng change的覆盖）。它显然工作得很好，但是当父作用域的函数被执行，并且作用域的某些变量在其中被修改时，它会被延迟，如果当前的更改不是在上一步中执行的，则不会看到我已尝试添加超时、$apply、$digest。。。但是我不能让它同步 angular.module('plunker', []); //Parent controller function MainCtrl($scope) { $scop

我正在尝试用自己的model和change属性实现一个指令（作为ng model和ng change的覆盖）。它显然工作得很好，但是当父作用域的函数被执行，并且作用域的某些变量在其中被修改时，它会被延迟，如果当前的更改不是在上一步中执行的，则不会看到

我已尝试添加超时、$apply、$digest。。。但是我不能让它同步

angular.module('plunker', []);

//Parent controller
function MainCtrl($scope) {

  $scope.directiveValue = true;

  $scope.textValue = "init";

  $scope.myFunction = 

  function(){

    if($scope.directiveValue === true){

      $scope.textValue = "AAAA";

    }else{

      $scope.textValue = "BBBB";

    }
  }
}

//Directive
angular.module('plunker').directive('myDirective', function(){

  return {

    restrict: 'E',

    replace: true,

    scope: {

      myModel: '=model',
      myChange: '&change'

    },   

    template: '<span>Check<input ng-model="myModel" ng-change="myChange()" 
       type="checkbox"/></span>', 
   controller: function($scope) {

   },
   link: function(scope, elem, attr) {

     var myChangeAux = scope.myChange;

     scope.myChange = function () {
       setTimeout(function() {
         myChangeAux();
       }, 0);
     };

   }
});

// Html
<body ng-controller="MainCtrl">

  <my-directive model="directiveValue" change="myFunction()"></my-directive>
  <div>Valor model: {{directiveValue}}</div>
  <div>Valor texto: {{textValue}}</div>
</body>

angular.module（'plunker'，[]）；
//父控制器
函数MainCtrl（$scope）{
$scope.directiveValue=true；
$scope.textValue=“init”；
$scope.myFunction=
函数（）{
如果（$scope.directiveValue==true）{
$scope.textValue=“AAAA”；
}否则{
$scope.textValue=“BBBB”；
}
}
}
//指示
angular.module（'plunker'）。指令（'myDirective'，函数（）{
返回{
限制：'E'，
替换：正确，
范围：{
myModel:'=模型'，
myChange:“&change”
},   
模板：“检查”，
控制器：功能（$scope）{
},
链接：功能（范围、要素、属性）{
var myChangeAux=scope.myChange；
scope.myChange=函数（）{
setTimeout（函数（）{
myChangeAux（）；
}, 0);
};
}
});
//Html
Valor模型：{{directiveValue}}
Valor texto:{{textValue}}

正确的结果是“myFunction”函数正确运行

示例：

您应该使用AngularJS'

$timeout

，它是浏览器默认设置

setTimeout

的包装，内部调用

setTimeout

以及

$digest

，所有这些都在正确的执行时间进行

您的指令代码应更改如下：

angular.module('plunker').directive('myDirective', function($timeout){

  return {
    restrict: 'E',
    replace: true,
    scope: {
      myModel: '=model',
      myChange: '&change'
    },   
    template: '<span>Check<input ng-model="myModel" ng-change="myChange()" type="checkbox"/></span>', 
    controller: function($scope) {
    },
    link: function(scope, elem, attr) {
      var myChangeAux = scope.myChange;

      scope.myChange = function () {
        $timeout(myChangeAux, 0);
      };
    }
  };
});

angular.module（'plunker'）。指令（'myDirective'，函数（$timeout）{
返回{
限制：'E'，
替换：正确，
范围：{
myModel:'=模型'，
myChange:“&change”
},   
模板：“检查”，
控制器：功能（$scope）{
},
链接：功能（范围、要素、属性）{
var myChangeAux=scope.myChange；
scope.myChange=函数（）{
$timeout（myChangeAux，0）；
};
}
};
});

您应该使用AngularJS'

$timeout

，它是浏览器默认值

setTimeout

的包装，内部调用

setTimeout

以及

$digest

，所有这些都在正确的执行时间进行

您的指令代码应更改如下：

angular.module('plunker').directive('myDirective', function($timeout){

  return {
    restrict: 'E',
    replace: true,
    scope: {
      myModel: '=model',
      myChange: '&change'
    },   
    template: '<span>Check<input ng-model="myModel" ng-change="myChange()" type="checkbox"/></span>', 
    controller: function($scope) {
    },
    link: function(scope, elem, attr) {
      var myChangeAux = scope.myChange;

      scope.myChange = function () {
        $timeout(myChangeAux, 0);
      };
    }
  };
});

angular.module（'plunker'）。指令（'myDirective'，函数（$timeout）{
返回{
限制：'E'，
替换：正确，
范围：{
myModel:'=模型'，
myChange:“&change”
},   
模板：“检查”，
控制器：功能（$scope）{
},
链接：功能（范围、要素、属性）{
var myChangeAux=scope.myChange；
scope.myChange=函数（）{
$timeout（myChangeAux，0）；
};
}
};
});