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 回答