文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >角js在window.alert中的角表达式

问角js在window.alert中的角表达式
EN

Stack Overflow用户
提问于 2017-01-02 14:33:24
回答 2查看 1.7K关注 0票数 0

嗨，我正试着提醒angularJs中表达式的值。

我对角很陌生，我只是想弄清楚如何在警报或控制台中获取表达式的值。

我在json中使用AngularJs，下面是我的代码

代码语言：javascript
复制
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-app='app'>
  <div ng-controller="ListCtrl">
    <ul>
      <li ng-repeat="menu in menus" id="{{menu.id}}" class="{{menu.cssClass}}">
        <a ng-href="{{menu.content}}" ng-click="doGreeting(greeting)">{{menu.description}}</a>
        <ul>
          <li ng-repeat="submenu in menu.menu" id="{{submenu.id}}" class="{{submenu.cssClass}}">
            <a ng-href="{{submenu.content}}" ng-click="ShowAlert()">{{submenu.description}}</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>


</body>

</html>

JAVASCRIPT

代码语言：javascript
复制
var app = angular.module("app", []);

app.controller("ListCtrl", ["$scope", "$http", "$window",
  function($scope, $http, $window) {
    $http.get('menu.json')
      .then(function(response) {
        $scope.menus = response.data.menus; // response data
        $scope.greeting = 'Hello, World!';
        $scope.ShowAlert = function () {
            $window.alert("{{menu.content}}");
        }
      });
  }
]);

JSON

代码语言：javascript
复制
{
   "menus":[
      {
         "id":"contact",
         "leaf":true,
         "description":"Contact Us",
         "link":"",
         "content":"contactUs.html",
         "cssClass":"static-content",
         "menu":null
      },
      {
         "id":"rules",
         "leaf":false,
         "description":"Sports Betting Rules",
         "link":"",
         "content":"",
         "cssClass":"",
         "menu":[
            {
               "id":"types",
               "leaf":true,
               "description":"Wager Types",
               "link":"",
               "content":"wagerTypes.html",
               "cssClass":"static-content wager-types",
               "menu":null
            },
            {
               "id":"odds",
               "leaf":true,
               "description":"Odds & Lines",
               "link":"",
               "content":"oddsAndLines.html",
               "cssClass":"static-content",
               "menu":null
            },
            {
               "id":"policies",
               "leaf":true,
               "description":"Rules & Policies",
               "link":"",
               "content":"rulesAndPolicies.html",
               "cssClass":"static-content rules-policies",
               "menu":null
            },
            {
               "id":"bonuses",
               "leaf":true,
               "description":"Sports Bonuses",
               "link":"",
               "content":"sportsBonuses.html",
               "cssClass":"static-content",
               "menu":null
            }
         ]
      },
      {
         "id":"conditions",
         "leaf":false,
         "description":"Terms & Conditions",
         "link":"",
         "content":"",
         "cssClass":"",
         "menu":[
            {
               "id":"termsOfService",
               "leaf":true,
               "description":"Terms of Service",
               "link":"",
               "content":"termsOfService.html",
               "cssClass":"static-content",
               "menu":null
            },
            {
               "id":"privacy",
               "leaf":true,
               "description":"Privacy Policy",
               "link":"",
               "content":"privacy.html",
               "cssClass":"static-content",
               "menu":null
            }
         ]
      },
      {
         "id":"view",
         "leaf":true,
         "description":"View in: Mobile | Full Site",
         "link":"",
         "content":"view.html",
         "cssClass":"static-content",
         "menu":null
      }
   ]
}
javascript
angularjs
json
html
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-01-02 14:35:28

将模型变量传递给函数，然后打印，

代码语言：javascript
复制
<li ng-repeat="submenu in menu.menu" id="{{submenu.id}}" class="{{submenu.cssClass}}">
            <a ng-href="{{submenu.content}}" ng-click="ShowAlert(submenu)">{{submenu.description}}</a>
          </li>

Controller.js

代码语言：javascript
复制
$scope.ShowAlert = function (val) {
     $window.alert(val);
}

Demo

​

代码语言：javascript
复制
var app = angular.module("app", []);

app.controller("ListCtrl", ["$scope",
  function($scope) {
$scope.ShowAlert = function (val) {
     alert(val.content);
}
    $scope.menus =  
      [{
        "id": "contact",
        "leaf": true,
        "description": "Contact Us",
        "link": "",
        "content": "contactUs.html",
        "cssClass": "static-content",
        "menu": null
      }, {
        "id": "rules",
        "leaf": false,
        "description": "Sports Betting Rules",
        "link": "",
        "content": "",
        "cssClass": "",
        "menu": [{
          "id": "types",
          "leaf": true,
          "description": "Wager Types",
          "link": "",
          "content": "wagerTypes.html",
          "cssClass": "static-content wager-types",
          "menu": null
        }, {
          "id": "odds",
          "leaf": true,
          "description": "Odds & Lines",
          "link": "",
          "content": "oddsAndLines.html",
          "cssClass": "static-content",
          "menu": null
        }, {
          "id": "policies",
          "leaf": true,
          "description": "Rules & Policies",
          "link": "",
          "content": "rulesAndPolicies.html",
          "cssClass": "static-content rules-policies",
          "menu": null
        }, {
          "id": "bonuses",
          "leaf": true,
          "description": "Sports Bonuses",
          "link": "",
          "content": "sportsBonuses.html",
          "cssClass": "static-content",
          "menu": null
        }]
      }, {
        "id": "conditions",
        "leaf": false,
        "description": "Terms & Conditions",
        "link": "",
        "content": "",
        "cssClass": "",
        "menu": [{
          "id": "termsOfService",
          "leaf": true,
          "description": "Terms of Service",
          "link": "",
          "content": "termsOfService.html",
          "cssClass": "static-content",
          "menu": null
        }, {
          "id": "privacy",
          "leaf": true,
          "description": "Privacy Policy",
          "link": "",
          "content": "privacy.html",
          "cssClass": "static-content",
          "menu": null
        }]
      }, {
        "id": "view",
        "leaf": true,
        "description": "View in: Mobile | Full Site",
        "link": "",
        "content": "view.html",
        "cssClass": "static-content",
        "menu": null
      }]
     ; // response data


  }
]);
代码语言：javascript
复制
<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

  <script data-require="jquery@1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>

  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app='app'>
  <div ng-controller="ListCtrl">
    <ul>
      <li ng-repeat="menu in menus" id="{{artist.id}}">
        <a ng-href="{{menu.content}}">{{menu.description}}</a>
        <ul>
          <li ng-repeat="submenu in menu.menu">
          <a ng-href="{{submenu.content}}" ng-click="ShowAlert(submenu)">{{submenu.description}}</a>
        </ul>
        </li>
    </ul>
  </div>


</body>

</html>

​

票数 1
EN

Stack Overflow用户

发布于 2017-01-02 14:36:54

关于$window.alert("{{menu.content}}");，角并不是在所有的JavaScript中自动地计算表达式-它只计算在模板中传递给它的表达式。它们被传递给类似于$compile的东西，它实际上编译了表达式。

您可以使用$scope.$eval (它不像听起来那么邪恶)做类似的事情。看起来可能是这样的：

代码语言：javascript
复制
var app = angular.module("app", []);

app.controller("ListCtrl", ["$scope", "$http", "$window",
  function($scope, $http, $window) {
    $http.get('menu.json')
      .then(function(response) {
        $scope.menus = response.data.menus; // response data
        $scope.greeting = 'Hello, World!';
        $scope.ShowAlert = function () {
            var alert = $scope.$eval('menu.content')
            $window.alert(alert);
        }
      });
  }
]);

或者，您可以评估HTML中的表达式(这是我的建议，以及上面@Sajeetharan发布的内容，所以我不会在这里复制它)。

请注意，角1.5+不鼓励以这种方式使用控制器，因为它们在角2.0中不以这种形式存在。我强烈建议将此代码移植为使用组件。您将有几个组件；一个用于ListCtrl，一个用于每个菜单，另一个用于每个子菜单。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/41428725

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档