Question

所以有一个带有两个按钮的模态。一个用于关闭模态，另一个用于在单击时触发函数。我已经将控制器附加到模态，控制器本身也可以工作，因为它成功console.log()。 ng-click似乎没有解雇这个功能。我想我只需要另外一套眼睛，非常感谢。

HTML：

<div id="forwardCall" class="modal fade" ng-controller="CallCtrl as call">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4>Transfer Call</h4>
          </div>
          <!-- dialog body -->
          <div class="modal-body">
            <p>Select Person below</p>
            <div id="transferSelection">
                <?php echo $transferCallSelect; ?>
            </div>
          </div>
          <!-- dialog buttons -->
          <div class="modal-footer">
          <button class="btn btn-warning" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="call.hideControls()">Transfer Call</button></div>
        </div>
      </div>
    </div>

控制器：

app.controller('CallCtrl', ['$scope', '$http', function($scope, $http){

    console.log("Call Controller");

    function hideControls(){

        console.log("Controls Hidden");
        var well = document.getElementById('callControls');
        well.style.display = 'none';
    }
}]);

Answer 1

如果您使用controller as语法，则绑定到this变量而不是$scope。这是一篇很好的帖子，谈到了Controller As Syntax。

tymejv给了你一个很好的建议。使用this语法时，必须将函数绑定到controller as。这样您就可以访问此特定控制器的函数或变量。

this.hideControls = function() { ... };

您也可以将功能绑定到$scope：

$scope.hideControls = function() { ... };

Answer 2

<强> controller.js

Return

<强>的index.html

(function () {
    'use strict';

    angular
        .module('app')
        .controller('CallCtrl', CallCtrl);

    CallCtrl.$inject = ['$scope', '$http'];

    function CallCtrl($scope, $http) {

        var vm = this;

        console.log("Call Controller");

        vm.well = true;
        vm.hideControls = function () {

            console.log("Controls Hidden");

            //Do not to this! This is not jQuery
            //var well = document.getElementById('callControls');
            //well.style.display = 'none';

            vm.well = false;
        };

    }
}());

单击Ng-Click未触发按钮

2 个答案: