Angularjs 具有parent.parent作用域的双向绑定

Angularjs 具有parent.parent作用域的双向绑定,angularjs,data-binding,angularjs-directive,angularjs-scope,isolate-scope,Angularjs,Data Binding,Angularjs Directive,Angularjs Scope,Isolate Scope,我遇到一个问题,即具有隔离作用域的指令没有通过绑定到其父.parent作用域进行更改 总之,我希望对绑定到父属性的指令隔离作用域中的属性所做的更改会一直传播到该属性的父作用域(该属性从parent.parent作用域继承而来),但事实并非如此。它仅更改直接父作用域上的值,而parent.parent作用域具有旧值。更糟糕的是,对parent.parent作用域属性的任何更改都不再向下延伸到隔离作用域或其直接父级。我知道这是Javascript原型继承的正常行为,Angular作用域是基于此构建的

我遇到一个问题,即具有隔离作用域的指令没有通过绑定到其父.parent作用域进行更改

总之,我希望对绑定到父属性的指令隔离作用域中的属性所做的更改会一直传播到该属性的父作用域(该属性从parent.parent作用域继承而来),但事实并非如此。它仅更改直接父作用域上的值,而parent.parent作用域具有旧值。更糟糕的是,对parent.parent作用域属性的任何更改都不再向下延伸到隔离作用域或其直接父级。我知道这是Javascript原型继承的正常行为,Angular作用域是基于此构建的,但在这种双向数据绑定的情况下不需要它,我正在寻找Angular中的解决方案

下面是一个行为示例:

My HTML包含一个控制器div(
MyController1
),其中是另一个控制器div(
MyController2
),其中是一个指令(
MyDirective
):

您会注意到:

  • 如果多次单击MyController1的“更改”按钮,所有级别都将更新(向下继承)

  • 如果然后单击
    MyDirective
    的更改按钮,它将更新
    MyController2
    (向上绑定),但不会以任何方式更改
    MyController1

  • 在这一点之后,单击MyController1的更改按钮不再向下延伸到MyController2和MyDirective范围,反之亦然。这两个国家现在彼此分离了。这就是问题所在

所以我的问题是:

  • Angular是否有一种方法允许作用域属性的绑定或继承(在本例中为myMessage)沿着父作用域一路延伸

  • 如果不是,我应该以什么方式将指令的隔离作用域中的更改同步到parent.parent控制器作用域的属性?指令无法了解其父级的结构


正如@Claies所提到的,使用
控制器作为
是一个好主意。通过这种方式,您可以直接了解要更新的作用域,并且可以轻松地在方法中传递作用域

语法:
ng controller=“MyController as ctrl1”

然后在内部:
{{ctrl1.myMessage}
ng click=“ctrl1.change()”
click=“ctrl2.change(ctrl1)”

这会改变您编写控制器的方式,省去
$scope
依赖项,除非您出于其他原因需要它,然后保留模型

function MyController () {
  var count = 0
  this.myMessage = "from controller"
  this.change = function () {
    this.myMessage = "from controller one " + (++count)
  }
}

function MyController2 () {
  var count = 0
  this.change = function (ctrl) {
    ctrl.myMessage = "from controller two " + (++count)
  }
}

最简单的更改是在根控制器中使用$scope.msg.mymessage,而不仅仅是$scope.msg

function MyController($scope) {
    var count = 0;
    $scope.msg = {};
    $scope.msg.myMessage = "from controller";
    $scope.change = function(){
        $scope.msg.myMessage = "from controller one " + (++count);
    }
}
这是一把叉形小提琴(听起来很有趣),有着预期的效果


这似乎是JavaScript原型继承的副作用。这是因为您使用的是原语而不是对象,JavaScript继承允许原语隐藏在原型链中。我不能很好地解释它,我建议仔细阅读。是的,谢谢,我理解这是个问题,但是有没有使用角度绑定的解决方案?如果没有,这个问题还有什么其他角度的解决方案?使用对象,或者使用ControllerAs语法,其中控制器就是对象。出于许多其他原因,我强烈推荐ControllerAs语法,但主要是因为它打破了对
$scope
的依赖,有助于解决继承问题,并且更接近angular 2语法。谢谢。我不熟悉ControllerAs的语法,我将对此进行研究。你能给我举个例子吗?有几篇好文章,但我先从。或者肯定是在“controller as”语法上销售的,这看起来比我一直依赖的神奇作用域继承要好得多。我最终通过绑定到
$parent.myMessage
解决了这个问题,但这肯定是一个更完整的解决方案,我将在将来开始使用它。
function MyController () {
  var count = 0
  this.myMessage = "from controller"
  this.change = function () {
    this.myMessage = "from controller one " + (++count)
  }
}

function MyController2 () {
  var count = 0
  this.change = function (ctrl) {
    ctrl.myMessage = "from controller two " + (++count)
  }
}
function MyController($scope) {
    var count = 0;
    $scope.msg = {};
    $scope.msg.myMessage = "from controller";
    $scope.change = function(){
        $scope.msg.myMessage = "from controller one " + (++count);
    }
}