观察布尔值时,AngularJS指令双向数据绑定不起作用

vq8itlhq  于 2022-10-24  发布在  Angular
关注(0)|答案(3)|浏览(169)

我有一个双向数据绑定,它不会改变发送给指令的变量的值。
我的指令监视触发器并将焦点放在Associates元素上(基于在so找到的代码):

app.directive('focusMe', function ($timeout) {
  return {
    scope: {
      trigger: '=focusMe'
    },
    link: function (scope, element, attrs) {
      scope.$watch('trigger', function(value) {
        console.log("directive value: " + value);
        console.log("directive start: " + scope.trigger);
        if (value === true) {
          $timeout(function () {
            element[0].focus();
            scope.trigger = false;
            console.log("directive end: " + scope.trigger);
          });
        }
      });
    }
  }
});

在HTML语言中,我这样称呼它:

<input type="text" ng-model="item.value" focus-me="focusInput" />

当我第一次触发它时,它可以工作--因为focusInput变量切换它的值。但是当指令完成时,控制器作用域中的focusInput(在指令之外)不会切换回false
假设我理解应该发生的事情,当我调用scope.trigger = false时,应该会切换回false
缺少什么会导致双向绑定不将值推回到传递到指令中的变量?

更新01:

为了发布这个问题,我删除了一些代码。该HTML实际上看起来如下所示:

<input type="text" ng-model="item.value" focus-me="focusInput" ng-if="item.condition != 'matches' && item.condition != 'does not match'" />

如果input字段隐藏,然后重新显示(基于ng-if),则指令将在focusInput第一次更改时正确地给予焦点。在那之后它将再次停止工作。除非重复隐藏/显示过程。

62lalag4

62lalag41#

您遇到的问题是处理原始值(Boolean、int等)时的常见问题。在射程范围内。
我强烈建议阅读Understanding Scopes文章。(简而言之:基元在指令的独立作用域中更改,并且不在父作用域(即控制器作用域)的链上查找)。
至于如何解决您的情况,我建议使用点符号并将您的原语存储在一个对象中,并将该对象绑定到您的指令:

scope: {
   triggerObj: '=focusMe'
},

并确保指令中的触发器引用现在是scope.triggerObj.trigger
并且在您的控制器中有:

$scope.triggerObj = {};
$scope.triggerObj.trigger = true; //or false, what have you

拥有一个对象将确保双向绑定有效。有时间的话请阅读上面的文章:)

c3frrgcw

c3frrgcw2#

指令创建一个作用域。将参数传递给作用域时,通过引用和布尔值传递的对象(以及数字、字符串...)通过值传递。
例如:

function changeToFalse(bool) {
    bool= false;
    console.log(bool);  // false
}

function changeObjToFalse(obj) {
    obj.bool= false;
    console.log(obj.bool);  // false
}

var obj = {bool : true};

changeToFalse(obj.bool);
console.log(obj.bool);  // true
changeObjToFalse(obj);
console.log(obj.bool); // false

另请参阅同一问题-two way binding not working with ng-repeat

anauzrmj

anauzrmj3#

我的情景如下:

parentCtrl  
-> directive1  
--> directive2

我试图通过双向绑定将parentCtrl.Model.Variable传递给Directive2。
由于上述问题,更新无法从指令1返回到parentCtrl。在Directive1中使用虚拟对象时,我还需要一个监视器来将值传递给parentCtrl。
我最终在指令1中尝试了以下技巧:
$scope.scp = $scope;
并将指令2绑定到scp.Variable。
绑定是这样工作的,但我不知道这种黑客攻击可能会有什么负面影响。欢迎投稿!

相关问题