Question

我正在尝试创建一个动态指令，它将从属性中接收绑定选项。这是我的控制器视图：

<div ng-controller="OtCtrl">
     <div ng-include src="'/client/views/openTradeView.html'"></div>
</div>

我的观点：

<div>
    {{name}}
    <div swings binding="Risk" title="Risk"></div>
    <div swings binding="Amount" title="Amount"></div>
</div>

这是我的指示视图：

<div>
    {{title}} 
    <a href="javascript:void(0)" ng-click="minus()">-</a>
    {{amount}}
    <a href="javascript:void(0)" ng-click="plus()">+</a>
</div>

这是我的指示：

app.directive("swings", function () {
return {
    replace: true,
    scope: {
        title : '@title',
        amount: '=binding',
        extra: '=bindingExtra'
    },
    resctrict: "A",
     controller: function($scope){

        $scope.minus = function (event, binding) {
            $scope.amount -= 1;
            console.log(binding)
        }
        $scope.plus = function (event) {
            $scope.amount += 1;
        }
    },
    templateUrl: '/client/views/swingsDirectiveView.html'
}
});

最后我的控制器：

app.controller("OtCtrl", ['$scope', function ($scope) {
    $scope.Amount = 400;
    $scope.Risk = 100;

    setInterval(function(){
       console.log($scope.Risk)
    },2000);
}]);

我知道当我使用ng-view时，angularjs会创建新范围。我的问题是，当我点击加号或减号时，指令中的金额更新但控制器中的风险模型没有，但是在第一个加载指令中获取风险初始值并设置金额。

如何解决此问题。

谢谢

Answer 1

我建议您在控制器中创建model属性，如下所示：

app.controller("OtCtrl", ['$scope', function($scope) {
  $scope.model = {
    Amount: 400,
    Risk: 100
  }
}]);

然后，通过以下方法将其绑定到您的指令：

<div swings binding="model.Risk" title="model.Risk"></div>

可能发生的是范围继承正在创建Amount和Risk的副本（因为它们是原始的）;而创建这样的对象会导致引用被复制，这意味着范围层次结构共享相同的数据。

Angularjs双向绑定问题

1 个答案: