Question

我最初的目标是创建包含输入定义的组件，并将所有内容收集回父控制器上。我必须使用hacky方法来实现这个目标（$ rootScope，$ on），但我想知道我的代码出错了。这是关于指令和控制器之间的双向绑定（“=”）

我的观点：

<div ng-app="app" ng-controller="myCtrl">
    my input value: {{variable}}
    <div my-directive input="variable"></div>
</div>

我的控制器/指令

angular.module("app",[])
.controller("myCtrl", function($scope){
    $scope.variable = "initial value";
})
.directive("myDirective", function(){
    return {
        scope: { eggplant: "=input" },
        template: "Change the parent value: <input ng-model='eggplant'/>" +
                  "<br> eggplant: {{eggplant}}"
    }
});

无论出于何种原因，这都行不通。我在模板上尝试了一些其他配置，例如......

...
template: "Change the parent value: <input ng-model='{{eggplant}}'/>"
...

...
template: "Change the parent value: <input ng-model='{eggplant}'/>"
...

但最终，我必须在指令中添加一个控制器（带有$ scope），添加一个ng-change函数，当指令发生变化时，将它附加到指令控制器$ scope ...但这不是感觉是解决这个问题的正确方法。任何人都可以透露我哪里出错了吗？

...
.directive("myDirective", function(){
    return {
        scope: { eggplant: "=input" },
        template: "Change the parent value: "+
                  "<input ng-model='eggplant' ng-change='change(eggplant)'/>",
        controller: function($scope){
            $scope.change(val){
                // I also have a $rootscope hack I can sell you :P
                $scope.eggplant = val;
            }
        }
    }
});

感谢您的帮助！

Answer 1

你的指令很开始。在您的范围内，您希望在这种情况下将eggplant分配给input，而不是variable：

.directive("myDirective", function(){
    return {
        scope: { eggplant: "=input" },
        template: "Change the parent value: <input ng-model='eggplant'/>" +
                  "<br> eggplant: {{eggplant}}"
    }
})

您告诉指令绑定属性，而不是值名称。

如何使用指令中的输入来实现双向绑定？

1 个答案: