从HTML页面调用Bootstrap函数

Question

我尝试调用angular-js函数，但它说“无法读取属性'忘记'未定义”请帮助解决此问题

我正在使用以下js代码

var rootApp = angular.module('rootApp', ['firstApp','secondApp']);

var firstApp = angular.module('firstApp', []);
firstApp.controller('FirstController', function($scope) {
  alert("First app ");
});

var secondApp = angular.module('secondApp', []);
secondApp.controller('SecondController', function($scope) {
  alert("Second app. ");

 $scope.forget = function () {
 alert("forget function calling ");

 }

});

并在html中使用以下行来调用此函数。

angular.element(document.getElementById('SecondController')).scope().forget();

Answer 1

将此代码放入控制器

$scope.forget = function () {
   alert("forget function calling ");
}

Answer 2

我希望你在使用ng-controller ='SecondController'的DIV上有一些id。 例如，

<div id="controllerContainer" ng-controller='SecondController'>
</div>

然后使用以下代码调用该函数：

var $scope = angular.element($('#controllerContainer')).scope();
$scope.forget();
$scope.$apply();

我使用过jQuery选择器，但你也可以尝试使用普通的javascript选择器。

Answer 3

通过jQuery选择器检索范围是一种破解方式。您希望将页面拆分为逻辑部分，并为每个部分定义一个控制器，如下所示：

<div ng-controller="MainCtrl">
    <button ng-click="forget()">Forget</button>
</div>

div中的DOM元素可以访问MainCtrl的范围，所以只剩下要做的就是在控制器中定义函数：

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.forget = function forget() {
        // insert forget logic here
    }
}]);

注意用于定义控制器的数组表示法。如果您想缩小代码，这很重要，因为angular主要依赖于依赖字符串值。这是一个sample plnkr供你试验。

答案 3 :(得分：0)

  

我不知道你究竟想做什么，但Angular以不同的方式工作。我猜你试图在加载DOM时调用“forget（）”。如果是这种情况，那么你的做法是错误的。

错误的方法 angular.element（的document.getElementById（ 'SecondController'））范围（）忘记（）;

最佳方法

            var rootApp = angular.module('rootApp', ['firstApp', 'secondApp']);

            var firstApp = angular.module('firstApp', []);
            firstApp.controller('FirstController', function ($scope) {
                alert("First app ");
            });

            var secondApp = angular.module('secondApp', []);
            secondApp.controller('SecondController', function ($scope) {
                alert("Second app. ");
                $scope.forget = function () {
                    alert("forget function calling ");
                }

                init();

                function init() {
                    $scope.forget();
                }
            });

  

否则，如果您尝试在按钮点击或其他方式上调用此“忘记”方法，则需要按照以下方法进行操作。

        <div id="controllerContainer" ng-controller='SecondController'>
           <input type='button' ng-click='forget()' value='Click me'>
         </div>

Answer 4

  

我不知道你究竟想做什么，但Angular以不同的方式工作。我猜你试图在加载DOM时调用“forget（）”。如果是这种情况，那么你的做法是错误的。

错误的方法 angular.element（的document.getElementById（ 'SecondController'））范围（）忘记（）;

最佳方法

            var rootApp = angular.module('rootApp', ['firstApp', 'secondApp']);

            var firstApp = angular.module('firstApp', []);
            firstApp.controller('FirstController', function ($scope) {
                alert("First app ");
            });

            var secondApp = angular.module('secondApp', []);
            secondApp.controller('SecondController', function ($scope) {
                alert("Second app. ");
                $scope.forget = function () {
                    alert("forget function calling ");
                }

                init();

                function init() {
                    $scope.forget();
                }
            });

  

否则，如果您尝试在按钮点击或其他方式上调用此“忘记”方法，则需要按照以下方法进行操作。

        <div id="controllerContainer" ng-controller='SecondController'>
           <input type='button' ng-click='forget()' value='Click me'>
         </div>