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

Question

我一生无法解决这个问题。 我什至不知道这是AngularUI Router还是Ionic本身的问题。

我正在尝试使用自定义AngularJS指令完成双向绑定（即指令定义中的scope: {data: "="} ），此jsfiddle演示了它的完美工作方式，但在我的特定上下文中使用的是完全相同的代码（即：在我到达带有“更改数据”按钮的页面之前，我会浏览两种状态）（ jsfiddle在此处）。

SO提示我添加一些代码以沿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
*/

Answer 1

在调用$ scope.signatureData =“ hello”之前，未定义$ scope.signatureData;

尝试在访问该控制器时定义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";
    };
}])

Answer 2

我想我已经指出了问题。

显然，AngularUI Router（ j'accuse！ ）是负责任的，因为它的作用域会产生一些奇怪的现象。 我已经更新了两个小提琴：工作示例，坏示例。 如您所见，我在两个小提琴中都添加了有关作用域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 Router专家能为您节省时间。

Answer 3

跟随这个

您必须使用“点分”符号

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

问题描述

3 个解决方案

解决方案1
0 2015-01-27 16:36:10

解决方案2
0 已采纳 2015-01-28 08:28:38

解决方案3
-1 2015-04-13 08:32:51

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

问题描述

3 个解决方案

解决方案1 0 2015-01-27 16:36:10

解决方案2 0 已采纳 2015-01-28 08:28:38

解决方案3 -1 2015-04-13 08:32:51

解决方案1
0 2015-01-27 16:36:10

解决方案2
0 已采纳 2015-01-28 08:28:38

解决方案3
-1 2015-04-13 08:32:51