为什么这个递归的Angular指令中的模型不会更新？

Question

为什么这个递归的Angular指令中的模型不会更新？

angularjsrecursionangularjs-directivescopeangular-ngmodel

3

这一整天这个问题一直困扰着我。

为什么在我输入文本框时名称不会更新？所有的操作都按规范进行，可能出了什么问题？

总结一下：我试图构建一个递归指令，当它遇到对象时，它会再次调用自身，直到达到字符串级别。当它达到字符串级别时，它将提供一个可更改字符串的输入框（即对象中键/值对的值）。

这里是JSFiddle

<body ng-app="test">
    <div ng-controller="ctrl">
        <my-dir the-model="greet"></my-dir>{{greet}}</div>
</body>

angular.module('test', [])
    .controller('ctrl', function ($scope) {
    $scope.greet = {
        "name": "Joe",
        "surname": "Norris"
    };
})
    .directive('myDir', function ($compile) {
        var theTemplate = 
            '<div ng-if="isObject(theModel)">' +
                    '<div ng-repeat="(k,v) in theModel">'+
                        '<my-dir the-model="theModel[key]"></my-dir>'+
                    '</div>'+
            '</div>'+
            '<div ng-if="!isObject(theModel)">' +
                '<input type="text" ng-model="theModel">'+
            '</div>'
        
    return {
        restrict: 'E',
        scope: {
            theModel: '='
        },
        controller: function ($scope) {
            $scope.isObject = function (val) {
                if (typeof val === 'object') {
                    console.log("isObject");
                    return true;
                } else{
                    console.log("is not Object");
                    return false;
                }
            }
        },
    link: function (scope, element) {
        element.html(theTemplate); //.append(theTemplate);
        $compile(element.contents())(scope);
    }
    }
});

- Raphi

不要在 ng-model 中使用原始类型。原始类型没有继承性。一般的经验法则是，ng-model 中应该总是有一个点。 - charlietfl

@charlietfl 那我应该使用什么？你说的 ng-model 应该有一个点是什么意思？ - Raphi

阅读有关Angular作用域的内容，特别是作用域内的继承。 - charlietfl

我不明白它为什么在这里能运行而在我的电脑上不能。https://dev59.com/g2Ij5IYBdhLWcg3wERNx#20672965 - Raphi

关于子作用域和递归的不同情况。 - charlietfl

@charlietfl 这是关于模板中的拼写错误，他在模板HTML的“the-model”属性中放置了“key”而不是“k”。 - Pankaj Parkar

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vinay K · Answer 1

当我们使用ng-model和一个变量名一起提供时，ng-model将会更新它所编译的作用域中的变量。

ng-repeat为每次迭代创建一个新的作用域。

当我们在ng-repeat内部使用ng-model时，每个ng-model都将与由ng-repeat创建的新作用域一起编译。因此，这些值不会在控制器的作用域中更新。

要更新控制器作用域中的值，请使用点表示法（即，在控制器中创建一个对象，并将ng-model绑定到其属性）。

- Pankaj Parkar · Answer 2

我认为你的问题出在指令模板上，其中你犯了一个错误（拼写错误）

你应该将 the-model 属性值从 theModel[key] 更改为 theModel[k]，因为你在 ng-repeat 中声明了 (k,v)，它们是键值对。

模板

var theTemplate =
    '<div ng-if="isObject(theModel)">' +
      '<div ng-repeat="(k,v) in theModel">' +
        '<my-dir the-model="theModel[k]"></my-dir>' +
      '</div>' +
    '</div>' +
    '<div ng-if="!isObject(theModel)">' +
        '<input type="text" ng-model="theModel">' +
    '</div>'

工作的Fiddle

希望这能对你有所帮助，谢谢。