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

时间:2015-01-27 16:24:23

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

我不能为我的生活缠住这个问题;我甚至无法弄清楚AngularUI路由器或Ionic本身是否存在问题。

我尝试使用自定义AngularJS指令完成双向绑定(即指令定义中的scope: {data: "="}),它完全正常运行,如this jsfiddle所示,但使用的代码完全相同在我的特定背景下(即:在我到达带有"更改数据"按钮的页面之前,我浏览了两个状态)没有(jsfiddle here)。

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
*/

3 个答案:

答案 0 :(得分:0)

在调用$ scope.signatureData =&#34; hello&#34;;

之前,未定义$ 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";
    };
}])

答案 1 :(得分:0)

我想我已经确定了这个问题。

显然AngularUI路由器( j&#39; accuse!)负责,因为它对其范围做了一些奇怪的mumbo-jumbo。我已更新了两个小提琴:working examplebroken example。正如您所看到的,我在两个小提琴中添加了所涉及范围的ID的日志:工作示例正确地指出该指令将其范围3中的模型双向绑定到其父级中的模型&# 39;范围(范围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路由器专家能够进入并节省一天。

答案 2 :(得分:-1)

关注This

你必须使用“点缀”符号