NGモデル内の式を使用できますか？

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

質問

私はNGモデル指令の内側の表現を使いたいですこのバインディングを達成する方法はありますか？コンパイルのようなものを使って行うことができますか？これが私のマークアップ

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

役に立ちましたか？

解決

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

@をController =（式を使用せずに）表示されるよりも$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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top