【问题标题】:Angular radio ng-change works only first timeAngular radio ng-change 只在第一次工作
【发布时间】:2015-12-07 10:06:52
【问题描述】:

我不明白为什么 Angular ng-change 函数只在第一次点击时被调用。在这个例子中

http://jsfiddle.net/ZPcSe/5/

每次更改当前收音机选择时都会调用函数,但在我的代码中出现问题

http://jsfiddle.net/4jL3u8ko/1/

有人可以将我的代码更改为像第一个示例一样工作,并解释为什么它不工作吗?

【问题讨论】:

标签: javascript angularjs


【解决方案1】:

好问题。

这不是答案,但人们可以将此解释称为答案和可能出现的任何进一步问题。这种情况经常发生,因此了解这一点很重要。 @Victor 给出的答案还可以,@Atias 的评论也很有帮助。

解释-

简单解释:ng-repeat 形成子作用域。

小细节:

所以您的应用程序有 3 个作用域(或者可能会根据 $scope.radioButtons 中的值的数量而增加)。让我为它们命名 - parentScope(主要作用域)、childScope1(ng-repeat 的第一个元素的作用域)和 childScope2(ng-repeat 的第二个元素的作用域)。

父范围变量:calledFunctions(array)、radioButtons(object) 和 newValue(function)

ChildScope1 变量:name(在开始时分配了一个文字),val(在开始时分配了一个对象)和 value(它没有值,或未定义)

ChildScope2 变量:name(在开始时分配了一个文字),val(在开始时分配了一个对象)和 value(它没有值,或未定义)

当您单击 childScope1 的单选按钮时会发生什么(第一次):

ChildScope1.value = ChildScope1.name 或 ChildScope1.value= "Radio1"; ng-change 指令检查此范围的模型是否已更改?是的,因为它是未定义的,现在它有一个文字(“Radio1”)!所以调用 ChildScope1.newValue(),它显然不存在。因此现在寻找父调用 parentScope.newValue()。这是存在的,所以执行它。

请记住 ChildScope1.value= "Radio1";

点击其他单选按钮后...... 现在让我们第二次点击 ChildScope1 的单选按钮。点击后——ChildScope1.value = ChildScope1.name or ChildScope1.value="Radio1"; ng-change 指令检查此范围的模型是否已更改???不!!因为它仍然包含与以前相同的文字值,所以甚至不要寻找 ChildScope1.newValue() 或 ParentScope.newValue() 函数。

现在 ChildScope2 也会发生同样的事情。

希望这能解释为什么你的小提琴像一次性绑定一样工作,或者@Victor 或@Atias 是如何正确的。

简单的解决方案是 - ChildScope1 或 ChildScope2 或任何其他子范围的 ng-model 应该指向父范围的变量。因此,您可以使用 $parent 或在具有属性的父范围(主范围)中创建一个对象(例如 - ParentVal={ChildVal = ""};)。并且在 ng-model 里面 ng-repeat-write ng-model=ParentVal.ChildVal.

对不起,我的英语不好,如果有任何拼写错误,请原谅我的拼写错误。

谢谢

【讨论】:

    【解决方案2】:

    ng-model 很棘手。您应该始终、始终在您的模型中使用一个点,否则您会遇到这种问题,即您正在创建多个模型并且您认为您只有一个。

    作为一种快速解决方法,在您的ng-modelng-change 中使用$parent.value 而不是只使用value

    作为一个很好的解决方法,在作用域中有一个合适的模型对象,而不是直接在作用域中存储值:

    $scope.model = {};
    
    ng-model="model.radiosValue"
    

    作为更好的解决方法,使用controllerAs 模式并将该对象用作视图模型。

    【讨论】:

    • 在我的示例中,$scope.value 只是所选电台名称的名称,就像在第一个 jsfiddle 中一样
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-11-24
    • 2018-09-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多