Javascript AngularJS插入警报框_Javascript_Angularjs

Javascript AngularJS插入警报框

javascript angularjs

Javascript AngularJS插入警报框,javascript,angularjs,Javascript,Angularjs,我对AngularJS完全陌生，一直以来都被这个问题困扰着。我希望能够有条件地在页面上显示Javascript alertbox。假设我想做这样的事情： <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head&

我对AngularJS完全陌生，一直以来都被这个问题困扰着。我希望能够有条件地在页面上显示Javascript alertbox。假设我想做这样的事情：

<!DOCTYPE html>
<html>

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  </head>

  <body>
    <div ng-app="myApp" ng-controller="personCtrl">
        <script>{{warning}}</script>
    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('personCtrl', function($scope) {
        $scope.warning = "alert('This is a warning');";
    });
    </script>

  </body>

</html>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Superhero';

    if ($scope.name==='Superhero') {
        alert("hello");   
    }
}

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Superhero';

    $scope.$watch('name', function(newVal, oldVal) {
        alert("hello");  
    })
}

我还尝试了trustAsHtml并在字符串中添加了脚本标记，但都没有显示alertbox。有人能告诉我出了什么问题吗？

您希望$scope.warning是一个函数，而不是执行函数或字符串的结果

 $scope.warning = function () { alert('This is a warning'); };

这样以后可以在视图中调用它：warning应该显示警报

或者，由于警报是一个函数，您可能只想将其用作$scope。警告：

$scope.warning = alert;

将产生相同的结果。

实际上应该是这样的：

<!DOCTYPE html>
<html>

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  </head>

  <body>
    <div ng-app="myApp" ng-controller="personCtrl">
        <script>{{warning}}</script>
    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('personCtrl', function($scope) {
        $scope.warning = "alert('This is a warning');";
    });
    </script>

  </body>

</html>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Superhero';

    if ($scope.name==='Superhero') {
        alert("hello");   
    }
}

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Superhero';

    $scope.$watch('name', function(newVal, oldVal) {
        alert("hello");  
    })
}

如果您希望在视图中通过更改模型有条件地显示警报，请尝试以下操作：

<!DOCTYPE html>
<html>

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  </head>

  <body>
    <div ng-app="myApp" ng-controller="personCtrl">
        <script>{{warning}}</script>
    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('personCtrl', function($scope) {
        $scope.warning = "alert('This is a warning');";
    });
    </script>

  </body>

</html>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Superhero';

    if ($scope.name==='Superhero') {
        alert("hello");   
    }
}

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Superhero';

    $scope.$watch('name', function(newVal, oldVal) {
        alert("hello");  
    })
}

现在，每次更改视图中的“名称”模型时，都会弹出警报

有关手表的更多信息，请参阅。

您只需发出警告即可。。在您的控制器中作为一个普通的代码行，您不需要使用范围，只需将警报放在您想要显示它的地方，就像您在javascript中使用的方式一样。