Ng-Click 未触发 Button is Clicked

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.js

(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;
        };

    }
}());

index.html

<div id="forwardCall" class="modal fade" ng-controller="CallCtrl as call">
    <div ng-show={{ call.well }}>Some content</div>
</div>

Answer 2

如果您使用 controller as 语法，您将绑定到 this 变量而不是 $scope。这里有一个很好的post讲到Controller As Syntax.

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

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

您也可以绑定到 $scope 函数：

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

Ng-Click 未触发 Button is Clicked

Ng-Click not firing Button is Clicked

angularjs

angularjs-ng-click