Обновление значения модели на объект с неизвестным именем

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> 

Важной частью является нг-модель. Я хочу сделать код как можно более удобным для использования, поэтому рассмотрим эту модель как та, которая может меняться в любое время. Вопрос в том, как изменить значение с контроллера, когда я не могу напрямую обновить $ scope.component.picture?

Есть ли способ получить объект модели элемента, независимо от его названия?

EDIT:

я, возможно, не было ясно. Рассмотрим случай, когда в другом месте приложения используется тот же шаблон, но с измененной моделью (так, нет 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/

EDIT: Я изменил код, так что вы просто использовать component и не component.picture. Если вы хотите присвоить свойство объекта, вы должны использовать его как component="comp.picture"