0

NG-MODEL ディレクティブ内で式を使用したい このバインディングを達成する方法はありますか? コンパイルのようなものを使用して行うことができますか？ここに私のマークアップがあります

<!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}}' でエラーが発生します ディレクティブからモデル属性を読み取る方法はありますか? そのようにリンクすることは可能ですか、それとも $compile を使用してこれを達成する必要がありますか? ディレクティブが子スコープで変数を作成し、それをディレクティブが生成している ng-model にバインドできるようにしたいと考えています。ディレクティブの「モデル」の属性を使用して、ng-model の変数を作成したいと考えています。この例では、「幅」を {{model}} 式の場所にしたいと考えています。

4

1 に答える 1

1

これはあなたが探しているものですか？

をコントローラーに表示されるものよりも(式を使用せずに) に置き換える場合は@、以下のコードを見てフィドルしてください。=$scope

編集

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

于 2014-04-11T21:11:44.967 に答える