Comment lier la valeur d'option sélectionnée dans ng-options à une valeur d'objet dans le contrôleur?

Question

J'ai quelques problèmes en essayant de mettre à jour la valeur sélectionnée en cours d'une option dans ng-options.
J'ai un tableau qui contient un objet. L'objet possède des propriétés 'value' et 'name' dont les valeurs sont constantes.
J'utilise ce tableau constant dans une directive personnalisée avec select et ng-options. Cela fait partie du code html de la directive:

<select 
    name="{{vm.name}}" 
    ng-model="vm.model" 
    ng-options="arrayObject.value as arrayObject.name for arrayObject in 
    vm.constantArrayofObject"> 
</select> 

Et j'utilise cette directive sous forme de vue.

<directive 
    model="" 
    form="someForm" 
    name="someName"> 
    </directive> 

Du point de vue du contrôleur I ai un objet « controllerObject » qui a un tableau d'objets en tant que propriété, comme ceci:

controllerObject.properties: [ 
    { 
    value: "someValue", 
    name: "someName" 
    } 
] 

je pour lier la valeur et le nom sélectionné option à la valeur et le nom de l'objet dans le tableau controllerObject.properties et de les transmettre à la fonction update(). Mais je ne suis pas sûr comment accéder à l'objet contrôleur dans la directive dans la vue html. Parce qu'il affiche déjà les valeurs de l'objet dans le tableau constant. C'est pourquoi je n'ai rien mis dans la propriété du modèle de la directive. Comment connecter les deux tableaux d'objets et mapper la valeur sélectionnée à la valeur de l'objet dans le contrôleur (et le nom)?
Toute aide serait grandement appréciée.

Answer 1

Partage des données du tableau d'options à l'aide d'un opérateur de liaison de données à deux voies à portée isolée "=". Pour cela, il suffit d'ajouter un attribut select-options avec le controllerObject.properties. Et puis l'avoir dans le bloc de portée de la directive. directive Donc à utiliser peut être:

<mydirective field="fielddata" select-options="controllerObject.properties"></mydirective> 

DDO:

app.directive('mydirective', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'dirtemplate.html', 
    scope: { 
     field: "=", 
     selectOptions: "=" 
    }, 
    link: function(scope, element, attrs) { 

    } 
    }; 
}); 

où dirtemplate.html est:

<select 
    name="{{field.name}}" 
    ng-model="field.model" 
    ng-options="arrayObject.value as arrayObject.name for arrayObject in selectOptions"> 
</select> 

Et dans le contrôleur de vues définissent fielddata & controllerObject comme:

app.controller('MainCtrl', function($scope) { 
    $scope.fielddata = { 
    name: "country", 
    form: "someForm", 
    model: "" 
    }; 
    $scope.controllerObject = {}; 
    $scope.controllerObject.properties = [ 
    { 
    value: "someValue", 
    name: "someName" 
    }, 
    { 
    value: "Value1", 
    name: "Name1" 
    }, 
    { 
    value: "Value2", 
    name: "Name2" 
    } 
    ]; 
}); 

Working plunker