Puoi usare un'espressione all'interno del modello NG?

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

Domanda

Voglio usare un'espressione all'interno di una direttiva sui modelli NG C'è un modo per realizzare questo legame?Può essere fatto usando qualcosa come la compilazione?Ecco il mio markup 

<!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= '{{model}}' Ti dà un errore è un modo per ottenere l'attributo del modello dalla direttiva?È possibile collegarlo in questo modo o devo usare $ compilazione per realizzare questo.Voglio che le mie direttive siano in grado di creare variabili nella portata dei bambini, quindi legarlo al modello NG che la direttiva sta generando.Voglio usare l'attributo del "modello" dalla direttiva per creare la variabile per il modello NG.In questo esempio voglio che "larghezza" sia dove l'espressione {{modello}} è.

È stato utile?

Soluzione

è questo quello che stai cercando?

Se si sostituisce il @ con il = rispetto a quello che lo vedrai sul controller $scope (senza usare un'espressione), dai un'occhiata al codice sotto il codice e il violino.

Modifica 

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}}'/>"
    }
});
.

Fiddle

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top