Question

这是一个关于Angular 1的问题，而不是Angular 2。

我的设置有点复杂：我有一个负责特定页面的控制器（控制器A）。在这个页面上，我有一个自定义指令，它从页面上的控制器获取输入。但是，这个自定义指令也有自己的控制器（控制器B），我将信息传递给属性上的via绑定。我传递给该指令并进入控制器B的大部分信息都是由控制器A生成和处理的。

控制器A基本上可以描述为控制器B的父级。

但是，与控制器B绑定到该指令是双向绑定（=），因此指令中控制器B中更改的信息应该冒泡回到控制器A中，因为双向绑定，因为传入的初始属性是控制器A的绑定信息。

虽然很复杂，但这对我来说大约有99％的时间。我在页面上有一个按钮，我想以这种方式禁用它：ng-disabled=CtrlA.buttonDisabled()。

buttonDisabled()是控制器A上的一个函数，它将指令中双向有界值的信息传递给控制器B，以便返回true，禁用按钮或false，不要禁用按钮。 / p>

在一个特定的实例中，即使更改控制器B上应该影响此功能的值，该功能本身也不会触发，因此应该禁用我的按钮。

我想知道如何强制控制器A上的buttonDisabled()从控制器B内部更改值执行。这可能吗？我可以通过$ watch这样做吗？如果是这样，我应该将哪些控制器放在这个信息上？

这是我的代码的简化版本：

控制器A：

$scope.userName = "";
$scope.buttonDisabled = function() {
    if($scope.userName){
        return false;
    }
    return true;
};

控制器B：

$scope.userName = "";
$scope.clearUserName = function(){
    $scope.userName = "";
    //I want to call disableButton from controller A here
}

主页的HTML：

<div ng-controller="CtrlA">
    <specialDirective username="{{userName}}"></specialDirective>
    <button ng-disabled="buttonDisabled()" ></button>
</div>

specialDirective模板的HTML

    <input ng-model="userName" />
    <button ng-click="clearUserName()" ></button>

指令设置：

app.component("specialDirective",{
    controller: CtrlB,
    bindings: {
        userName: "="
    },
    template: "directiveTemplate.html"
});

userName在specialDirective中是双向绑定的。

由于其他要求，我无法将clearUserName()或buttonDisabled()直接移至其他控制器。

编辑：感谢那些指出我的缺陷的评论者 - 我已经尽力在这个和我的回答帖子中纠正它们。我从头开始编写这个例子，因为复制粘贴我的确切代码太复杂了，它没有直接使用$ scope对象等，所以我为我的错误语法道歉。如果我错过了其他任何内容，请纠正我。（：

Answer 1

通过一些搜索并现在看到Georgeawg的评论，我能够弄清楚如何使用单向回调绑定来做我想做的事。

通过使用<，我能够绑定到一个回调函数，我可以从控制器B调用它将消息发送回控制器A.在我的情况下，我能够设置{{1作为我在回调期间执行的函数。这比使用$ watch更好，因为$ watch是一个很大的资源消耗。

请参阅此博客文章的捕获输出部分，作为我所做的示例：http://blog.krawaller.se/posts/dissecting-bindings-in-angularjs/

控制器A：

setDisabled()

控制器B：

$scope.userName = "";
var buttonDisabled = function() {
    if($scope.userName){
        return false;
    }
    return true;
};

主页的HTML：

$scope.userName = "";
$scope.clearUserName = function(){
    $scope.userName = "";
    $scope.out(); //calling the callback the directive was bound to, ultimately calling buttonDisabled() from Controller A
}

指令的HTML模板：

<div ng-controller="CtrlA">
    <specialDirective username="{{userName}}" out="buttonDisabled()"></specialDirective>
    <button ng-disabled="buttonDisabled()"></button>
</div>

指令设置：

<input ng-model="userName" />
<button ng-click="clearUserName()"></button>

通过2个控制器AngularJS触发事件，双向绑定

1 个答案: