se puede utilizar una expresión dentro de NG-MODEL?

StackOverflow https://stackoverflow.com//questions/23022112

Pregunta

Quiero usar una expresión dentro de un NG-MODELO de la directiva Es que hay una manera de lograr esta unión?se puede hacer uso de algo como compilar?aquí está mi marcado

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-controller="AppCtrl">
    <div></div>
    <range min="0" max="100" model="width"></range>
</body>
</html>
<script src="Scripts/angular.min.js"></script>


<script>

var app = angular.module("pager", []);

app.run(function($rootScope){

    console.log($rootScope);    

});

angular.element(document).ready(function(){

    angular.bootstrap(document.querySelector("html"), ["pager"]);

})

app.directive("range", function ($compile) {

    return {

        restrict: "E",
        replace: true,
        scope:{

            min:"@",
            max:"@",
            model:"@"

        },
        template: "<input type='range' ng-model='{{model}}' value='0' min='{{min}}' max='{{max}}'/>",

    }

})
</script>

ng-model='{{modelo}}' da un error ¿hay una manera de conseguir leer el modelo atributo de la directiva?Es posible vínculo de esa manera o tengo que usar $compilar para lograr esto.Quiero que mi directivas de ser capaz de crear variables en el ámbito secundario, a continuación, enlazar a la ng-model que la directiva está generando.Quiero usar el atributo de "modelo" de la directiva para crear la variable para el ng-model.en este ejemplo lo que quiero "ancho" en el que el {{modelo}} la expresión.

¿Fue útil?

Solución

¿Es esto lo que buscas?

Si va a reemplazar el @ con el = lo que usted verá en su controlador $scope (sin el uso de una expresión), echa un vistazo a el código de abajo, y el violín.

Editar

app.directive("range", function ($compile) {
    return {
        restrict: "E",
        replace: true,
        scope: {
            min: "@",
            max: "@",
            model: '='
        },
        compile: function () {
            return {
                pre: function (scope, elem, attrs) {
                    // The directives isolated scope
                    console.log(scope);
                    // Controller scope
                    console.log(scope.$parent);
                }
            }
        },
        template: "<input type='range' ng-model='model' value='0' min='{{min}}' max='{{max}}'/>"
    }
});

El violín

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top