AngularJS指令双向绑定在Ionic中不起作用答案

【问题标题】：AngularJS directive two-way binding not working in IonicAngularJS指令双向绑定在Ionic中不起作用
【发布时间】：2015-03-26 08:15:24
【问题描述】：

我一辈子都无法解决这个问题；我什至无法确定这是 AngularUI 路由器还是 Ionic 本身的问题。

我正在尝试使用自定义 AngularJS 指令完成双向绑定（即指令定义中的 scope: {data: "="}），它可以完美地工作，正如 this jsfiddle 所展示的那样，但在我的特定上下文中使用的完全相同的代码（即：在我使用“更改数据”按钮进入页面之前，我浏览了两种状态）没有（jsfiddle here）。

所以提示我添加一些代码以沿着 jsfiddle 链接进行，所以这里是工作版本。

页面：

<!-- HTML -->
<body ng-app="myApp">
    <div ng-controller="MyCtrl">
        <signature data="signatureData"></signature>
        <button ng-click="changeData()">Change data!</button>
    </div>
</body>

脚本：

//JS
angular.module("myApp", [])
.controller("MyCtrl", ["$scope", function ($scope) {
    $scope.changeData = function() {
        console.log("Outside directive:", $scope.signatureData);
        $scope.signatureData = "hello";
    };
}])
.directive("signature", [function() {
    var directiveDefinitionObject = {
        template: "<div>Don't mind me, I'm just a template...</div>",
        scope: {
            data: "="
        },
        controller: ["$scope", "$element", function($scope, $element) {
            $scope.data = "ciao";
            $scope.$watch("data", function(d) {
                console.log("Inside directive:", d);
            });
        }]
    };
    return directiveDefinitionObject;
}]);

/* Console output when clicking button:
Inside directive: ciao
Outside directive: ciao
Inside directive: hello
*/

相同的代码，虽然放在上下文中，但在第二个小提琴中太冗长了，无法粘贴到这里（对此我深表歉意，我已经尽可能地略读了它，但这只是为了让人们了解这个问题，以防万一帮助）。

然而，控制台输出是：

/* Console output when clicking button:
Inside directive: ciao
Outside directive: undefined
*/

【问题讨论】：

今天遇到了类似的问题，通过阅读解决了这个问题：sitepoint.com/understanding-angulars-apply-digest 不确定这是否是您需要的。
会调查的，谢谢。

标签： javascript angularjs angularjs-directive angular-ui-router ionic-framework

【解决方案1】：

关注This

你必须使用“点”符号

【讨论】：

【解决方案2】：

我想我已经查明了问题所在。

显然 AngularUI 路由器 (j'accuse!) 是有责任的，因为它的作用域做了一些奇怪的笨蛋。我已经更新了两个小提琴：working example，broken example。如您所见，我在两个小提琴中都添加了所涉及范围 id 的日志：工作示例正确地指出，该指令将其在范围 3 中的模型双向绑定到其父范围（范围 2）中的模型，并且应该看到这些变化的控制器确实是 2 号。另一方面，这个破碎的例子强调了手头的问题：指令（范围 24）将其模型绑定到父范围（23），但应该反映变化的控制器是数字22，所以不匹配。

angular.module("myApp", [])
.controller("MyCtrl", ["$scope", function ($scope) {
    console.log("Parent's scope id is:", $scope.$id);
    $scope.changeData = function() {
        console.log("Outside directive:", $scope.signatureData);
        $scope.signatureData = "hello";
    };
}])
.directive("signature", [function() {
    var directiveDefinitionObject = {
        template: "<div>Don't mind me, I'm just a template...</div>",
        scope: {
            data: "="
        },
        controller: ["$scope", "$element", function($scope, $element) {
            console.log("Two-way binding between directive's scope (%d) and directive's parent scope (%d)", $scope.$id, $scope.$parent.$id);
            $scope.data = "ciao";
            $scope.$watch("data", function(d) {
                console.log("Inside directive:", d);
            });
        }]
    };
    return directiveDefinitionObject;
}]);

结果（控制台日志）：

// Working version:
/*
Parent's scope id is: 2
Two-way binding between directive's scope (3) and directive's parent scope (2)
Inside directive: ciao
Outside directive: ciao
Inside directive: hello
*/

//Broken version
/*
Parent's scope id is: 22
Two-way binding between directive's scope (24) and directive's parent scope (23)
Inside directive: ciao
Outside directive: undefined
*/

现在我希望一些 AngularUI 路由器专家突然介入并节省时间。

【讨论】：

【解决方案3】：

$scope.signatureData 在你调用 $scope.signatureData = "hello";之前没有定义；

当您转到该控制器时尝试定义 signatureData...

.controller("JobRegistrationCtrl", ["$scope", function ($scope) {
    $scope.signatureData = "ciao"; //Now it's defined
    $scope.changeData = function() {
        console.log("Outside directive:", $scope.signatureData);
        $scope.signatureData = "hello";
    };
}])

【讨论】：

不，现在控制台日志Inside directive: ciao => Outside directive: foo（如果我初始化$scope.signatureData = "foo";）；此外，在工作示例中，我不需要定义signatureData，但它仍然有效......