Question

我的应用程序中有一个用作工具栏的标题。例如，如果我正在编辑帖子，则标题会显示＆＃34;删除＆＃34;，＆＃34;更新＆＃34;和＆＃34;发布/取消发布＆＃34;纽扣;如果我正在浏览帖子，它会显示＆＃34;搜索＆＃34;和＆＃34;创建＆＃34;纽扣。按钮功能存储在控制器中，有时可以使用控制器的$scope属性。这是我的结构

<html ng-app="myApp">
...

    <body ng-controller="MainCtrl">

        <nav>
            <ul>
                <li ng-repeat="link in navlinks">...</li>
            </ul>
        </nav>

        <header>
            <ul>
                <li ng-repeat="button in toolbar">
                    <button ng-click="button.func()" ng-class="button.type">{{button.name}}</button>
                </li>
            </ul>
        </header>

        <main ng-view>

        </main>

    </body>
</html>

按钮将从控制器内部设置。类似下面的东西（它不起作用 - 这甚至拒绝调用saveItem函数）：

$scope.$parent.buttons = [
    {label: 'Save', type: 'default', func: $scope.saveItem}
];

$scope.saveItem = function() {
    alert($scope.item.name);
}

如何按钮调用控制器内的功能？我想我需要某种形式的事件管理器来调用事件并在控制器中处理它们（而不是MainCtrl）。我怎样才能实现我的目标？

Answer 1

您的问题是您正在尝试将按钮功能绑定到$ scope变量。如果你稍微重新排列代码，它应该可以工作。

<强> HTML

<header>
    <ul>
        <li ng-repeat="button in toolbar">
            <button ng-click="buttonClick(button)" ng-class="button.type">{{button.name}}</button>
    </ul>
</header>

<强> JS

// Controller
$scope.$parent.buttons = [{
    label: 'Save',
    type: 'default',
    func: myButtonFunction
}];

$scope.buttonClick = function (button) {
    button.func();
}

function myButtonFunction() {
    alert('Howdy');
}

Answer 2

经过一番调查后，我最终使用了一些事件，因为这样可以将沟通的肮脏性降到最低。完全支持范围。

ChildCtrl:

    $scope.$parent.buttons = [
        {label: 'Save',
         type: 'default',
         msg: 'saveEvent'}
    ];

    $scope.$on('saveEvent', function() {
        alert($scope.item.name);
    });

View:

    <li ng-repeat="button in buttons">
        <button ng-class="button.type" ng-click="broadcast(button.event)">{{button.label}}</button>
    </li>

我不知道为什么但在$broadcast内使用ng-click不起作用，但一旦发现，我会更新此答案。

更新：ng-click="$broadcast(button.event)"无效但ng-click="broadcast(button.event)"无效，这很奇怪。在视图中，美元符号被省略。

如何添加带有来自子控制器的回调的标题栏按钮？

2 个答案: