Question

这一直令我感到困惑。

当我输入文本字段时，为什么不会更新名称？一切都在书中。可能出现什么问题？

总结一下：我正在尝试构建一个递归指令，当它遇到一个对象时，它再次调用自身直到它达到字符串级别。当它这样做时，它会给出一个可以改变字符串的输入（也就是对象中键/值的值）

Here's a 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);
    }
    }
});

Answer 1

当我们向ng-model提供variable name时，ng-model将更新其编译范围内的变量。

ng-repeat为每次迭代创建一个新范围。

当我们在ng-model内使用ng-repeat时，每个ng-model都将使用ng-repeat创建的新范围进行编译。因此，这些值不会在控制器的范围内更新。

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

Answer 2

我认为你的问题在于你犯了一个错误的指令模板（错误）

您应该将the-model属性值从theModel[key]更改为theModel[k]，因为您声明(k,v)是ng-repeat内的键值对。

<强>模板

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>'

<强> Working Fiddle

希望这可以帮助你，谢谢。

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

Here's a JSFiddle

2 个答案: