Tengo un montón de plantillas / vistas que consisten en etiquetas y entradas. Quiero establecer los valores de la etiqueta en los modelos de controlador ($scope.data.details que es una matriz).

Código: http://plnkr.co/edit/XqtyFKKNuo8upzPuaImo?p=preview

HTML

  <body ng-controller="MainCtrl">
    <label set-model="data.details[0]">Label 1</label>
    <input type=text/>
    {{ data.details[0] }}
    <label set-model="data.details[1]">Label 2</label>
    <input type=text/>
  </body>

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = {
    details: []
  };
});

app.directive('setModel', function() {
  return {
    restrict: 'EA',
    link: function(scope, element, attrs) {
      // var pair = JSON.parse(attrs)
      scope[attrs.setModel] = element.html();
      console.log(scope);
      // console.log();
    }
  };
})

Así que básicamente:

data.details [0] = "Etiqueta 1"

data.details [1] = "Etiqueta 2"

...

Sé que podría hacer esto en ng-init pero sería una larga lista en la parte superior. Quiero hacerlo en línea en el <label> mismo.

Pero en este momento no funciona ya que $scope básicamente muestra esto en la Consola de desarrollador:

data: Object
data.details[0]: "Label 1"
data.details[1]: "Label 2"

Por lo tanto, no puso details como clave dentro del objeto data pero creó una nueva clave data.details[0] completamente. Además, la estructura data podría ser diferente más adelante, así que no quiero hardcode nada.

¿Cómo lo arreglo?

¿O hay una mejor manera de hacer esto?

0
HP. 1 sep. 2014 a las 10:30

2 respuestas

La mejor respuesta

No funciona de esta manera porque cuando obtienes una clave como esta 'attrs.setModel' toma toda la cadena, lo que significa que se necesita data.details[0] o bien resuelves esto con otro código javascript simplemente usando el atributo de directiva scope Me gusta esto

app.directive('setModel', function() {
  return {
    restrict: 'EA',
    scope: {model : '=setModel'},
    link: function(scope, element, attrs) {
      // var pair = JSON.parse(attrs)
      scope.model = element.html();
      console.log(scope);
    }
  };
})

En este momento, su directiva toma un objeto de ámbito primario en lugar de una cadena, por lo que cualquier cambio de valor en esto afecta también al objeto de ámbito primario ...

Aquí está funcionando PLUNKER...

0
Poyraz Yilmaz 1 sep. 2014 a las 07:57

Intenta usar esto:

  <body ng-controller="MainCtrl">
    <label set-model="{{data.details[0]}}">Label 1</label>
    <input type="text"/>
    {{ data.details[0] }}
    <label set-model="{{data.details[1]}}">Label 2</label>
    <input type=text/>
  </body>

Plunker: http://plnkr.co/edit/d9lMXWJDUG6yTxsXFD33?p=preview

Si desea un resultado en la matriz, intente algo como esto: http://plnkr.co/edit/KZS1wO1cIvEo7sUpWoDU ? p = vista previa

0
Jyoti Puri 1 sep. 2014 a las 07:28