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

使用指令你可以注入任何类型的范围对象，对于名称空间是什么并不重要，该指令将把这些数据作为＆＃34; thisdata＆＃34;创建一个新的特定范围，它可以用来从提供的模板开始显示HTML。

AsyncComplete

我没有测试过它！

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"

更新名称未知的对象

2 个答案: