2

我最初的目标是创建包含输入定义的组件，并将所有内容收集回父控制器。我不得不使用一些 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;
            }
        }
    }
});

谢谢你的帮助！

4

1 回答 1

0

你的指令看起来不对劲。在您的范围内，您希望在这种情况下分配eggplant给，而不是：inputvariable

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

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

于 2013-10-18T17:22:25.457 回答