Question

我想在指令和控制器之间进行通信。所以写下这个示例代码，但它不起作用！我的问题是什么？对于这个问题有另一种方法吗？

    var myApp = angular.module('myApp',[]);

    myApp.controller('MyCtrl', function ($scope) {
        var vm = this;
        vm.directiveButtonClicked = function () {
            // Controller reacting to call initiated by directive
            alert('Button was clicked in directive');
            console.log("dfg dfg dfg dfg");
        }
    }); 

    myApp.directive("myDirective",function(){
        return {
            restrict: 'E',
            template: '<button ng-click="buttonClicked">Click Me</button>',
            scope: {
                onButtonClick: '&'
            },
            link: link
        };

        function link(scope, element, attrs, controller) {
            scope.buttonClicked = function () {
            // Button was clicked in the directive
            // Invoke callback function on the controller
            scope.onButtonClick();
        }
     }
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl as vm">
       <my-directive on-button-click="vm.directiveButtonClicked" />
    </div>

Answer 1

您需要为()和on-button-click中的功能添加ng-click：

    var myApp = angular.module('myApp',[]);

    myApp.controller('MyCtrl', function ($scope) {
        var vm = this;
        vm.directiveButtonClicked = function () {
            // Controller reacting to call initiated by directive
            alert('Button was clicked in directive');
            console.log("dfg dfg dfg dfg");
        };
    }); 

    myApp.directive("myDirective",function(){
        return {
            restrict: 'E',
            template: '<button ng-click="buttonClicked()">Click Me</button>',
            scope: {
                onButtonClick: '&'
            },
            link: link
        };

        function link(scope, element, attrs, controller) {
            scope.buttonClicked = function () {
                // Button was clicked in the directive
                // Invoke callback function on the controller
                scope.onButtonClick();
            };
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl as vm">
       <my-directive on-button-click="vm.directiveButtonClicked()" />
    </div>

Answer 2

只需删除ng-click即可使用此代码：

1) AppBundle\Tests\Controller\SecurityControllerTest exception 'Symfony\Component\Debug\Exception\ContextErrorException' with message 'Warning: pg_query(): Query failed: ERREUR: erreur de syntaxe sur ou près de « NOT » LINE 4: CREATE SCHEMA IF NOT EXISTS website; ^' in /.../AppBundle/Tests/Controller/SecurityControllerTest.php:18 Stack trace: #0 [internal function]: Symfony\Component\Debug\ErrorHandler->handleError(2, 'pg_query(): Que...', '/var/DATA/jenki...', 18, Array)

查看plunker。

Answer 3

在您的指令中，您正在尝试访问控制器中定义的函数。但是在视图中定义您的指令时，您没有将正确的引用传递给您的函数。试试这个：<my-directive on-button-click="vm.directiveButtonClicked" /> 而不是：<my-directive on-button-click="vm.directiveButtonClicked()" />

Angular中指令与控制器之间的双向通信

3 个答案: