更新名称未知的对象的模型值

Question

我有以下模板：

<select 
    id="someSelect"
    ng-model="component.picture" 
    ng-controller="someChildController" 
    size="12"
    ng-options="img.url as img.name for img in image.list | filter:img.filter">
</select>

重要的部分是ng-model。我想让代码尽可能地可重用，所以将此模型视为可以随时更改的模型。问题是，当我无法直接更新 $scope.component.picture 时，如何更改控制器的值？

有没有办法获取元素的模型对象，不管它的对象名称是什么？

编辑：

我可能没说清楚。考虑这种情况，在应用程序的不同位置使用相同的模板，但模型已更改（因此，没有 component.picture）。但它仍然包含在处理模型更新的子控制器中。我不能直接调用 component.picture，因为我不能确定它是 ng-model.

中的那个

如果一切都失败了，我可能需要做类似的事情：

var _el = angular.element('#someSelect');
var path = _el.attr('ng-model').split('.');
var model = $scope;
var lastIndex = -1;

path.forEach(function(p, i) {
    if(typeof model[p] === 'object') {
        model = model[p];
        lastIndex = i;
    }
    else return false;
});

model[path[lastIndex+1]] = "someNewValue";

但它很丑，所以我想知道是否有更好的方法。

Answer 1

使用指令，您可以注入任何类型的范围对象，无论命名空间是什么，指令都会将该数据作为 "thisdata" 创建一个新的特定范围，它可以用来显示 HTML 从提供的模板开始。

// HTML
<test-dir component="component.picture" images="image.list"></test-dir>

// JS
app.directive('testDir', function() {
    return {
        restrict: 'E',
        scope: { component: '=', images: '=' },
        template: '<select size="12" ng-options="img.url as img.name for img in images | filter:img.filter"></select>',
        link: function(scope, elem, attrs) {
            console.log(scope.component);
            console.log(scope.images);
        }
    }
})

我没测试！

Answer 2

您可以使用带有模板的指令，在模板中传递元素列表和模型，例如：

app.directive("newDirective", function () {
    return {
        restrict: 'E',
        scope: {
            image: '=',
            component: '='
        },
        template: '<select ng-model = "component" size = "12" ng-options = "img.url as img.name for img in image.list | filter:img.filter" > </select>'

    }
});

此处 html 存储在每次调用指令时应用的模板中，它为变量创建范围：

ngModel
包含渲染选项列表的对象

通过这种方式，您可以在每次需要时使用新模型：

<new-directive image="img" component="comp.picture"></new-directive>

其中 img 是控制器中包含列表的对象，comp 是存储值的变量。

我创建了一个可能对您有帮助的 jsfiddle。

JSFIDDLE: https://jsfiddle.net/vaebkkg9/2/

编辑：我更改了代码，因此您只需使用 component 而不是 component.picture。如果你想分配一个对象的属性你只需将它用作 component="comp.picture"

更新名称未知的对象的模型值

Update model value on object with unknown name

javascript

model

angularjs