你可以在 NG-MODEL 中使用表达式吗？答案

【问题标题】：can you use an expression inside of NG-MODEL?你可以在 NG-MODEL 中使用表达式吗？
【发布时间】：2014-04-11 20:36:09
【问题描述】：

我想在 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}} 表达式所在的位置。

【问题讨论】：

为什么你还有这个指令？只是为了节省一点打字？您不需要插值模型。删除 {{}}。
我想让它可重用我不确定最好的方法是什么老实说我在 Angular 方面处于中等水平，传递该变量的最佳方法是什么模型并使其等于“宽度”？

标签： javascript angularjs angularjs-directive angular-ngmodel

【解决方案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

【讨论】：

这绝对有帮助，但我之所以使用模型属性，是我希望 model = width 在控制器中绑定到 $scope.width，这样我就可以映射它并重新使用指令，我想要添加具有 model="height" 模型的范围输入并将其映射到 $scope.height 等等，那么 scope:{model:"&"} 会更有意义。我仍在学习如何使用隔离作用域和子作用域
@Jesse - 您可以重用指令 - 在指令内部它将绑定到模型，但在您的控制器中，<range min="0" max="100" model="width"></range> 模型仍将绑定到 $scope.width - 它们都在引用同一个对象，只是叫它别的东西。
谢谢你也试试看什么最有效
@jesse 我不确定我是否关注。我的示例确实在控制器范围内绑定了width，这就是我有日志范围按钮的原因。 Here is a more complex fiddle 显示 height 和 width 以及它们如何与 ng-style 一起使用。此外，这些 attr 仍然可以在您的指令中通过 link 或 compile 访问。
感谢 Asok 这正是我想要做的我只需要重新编写代码以使其更具可重用性我有大约 10 种不同的细线我需要像宽度一样绑定，高度、边框半径、颜色等...