当前位置： 移动技术网 > IT编程>开发语言>JavaScript > angularjs 控制器和$scope（六）

angularjs 控制器和$scope（六）

2020年07月22日  | 移动技术网IT编程  | 我要评论

文章目录

文章参考

  1. AngularJS 控制器(Controllers)

$scope的属性就是供在视图中展示用的视图模型（view model）

下面的例子提供了三种事件：

  1. 不传递任何参数
  2. 传递自定义参数
  3. 传递$event 事件
<!DOCTYPE html>
<html ng-app="spicyApp1">
  <head>
    <script src="../public/js/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="spicyApp1" ng-controller="SpicyCtrl">
      <button ng-click="chiliSpicy()">Chili</button>
      <button ng-click="jalapenoSpicy($event)">$event</button>
      <button ng-click="myParam('huangbiao')">myParam</button>
      <p>The food is {{spice}}!</p>
    </div>
  </body>
</html>
<script>
  var myApp = angular.module('spicyApp1', [])

  myApp.controller('SpicyCtrl', [
    '$scope',
    function ($scope) {
      $scope.spice = 'very'
      // 自定义传递参数
      $scope.myParam = function (paramStr) {
        $scope.spice = paramStr
      }
      // 不带参数
      $scope.chiliSpicy = function () {
        $scope.spice = 'chili'
      }
      // 传递事件对象
      $scope.jalapenoSpicy = function (eventObj) {
        console.log(eventObj)
        $scope.spice = 'jalapeño'
        debugger
      }
    },
  ])
</script>

$scope 作用域（继承）

ng-controller 指令会创建新的子级 scope ，这样我们就会获得一个与DOM层级结构相对应的的基于继承关系的 scope 层级结构

<!DOCTYPE html>
<html ng-app="scopeInheritance">
  <head>
    <script src="../public/js/angular.min.js"></script>
    <style>
      div.spicy div {
        padding: 10px;
        border: solid 2px blue;
      }
    </style>
  </head>
  <body>
    <div ng-app="scopeInheritance" class="spicy">
      <div ng-controller="MainCtrl">
        <p>Good {{timeOfDay}}, {{name}}!</p>

        <div ng-controller="ChildCtrl">
          <p>Good {{timeOfDay}}, {{name}} !</p>

          <div ng-controller="GrandChildCtrl">
            <p>Good {{timeOfDay}}, {{name}}!</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
<script>
  var myApp = angular.module('scopeInheritance', [])
  myApp.controller('MainCtrl', [
    '$scope',
    function ($scope) {
      $scope.timeOfDay = 'morning'
      $scope.name = 'Nikki'
    },
  ])
  myApp.controller('ChildCtrl', [
    '$scope',
    function ($scope) {
      $scope.name = 'Mattie'
    },
  ])
  myApp.controller('GrandChildCtrl', [
    '$scope',
    function ($scope) {
      $scope.timeOfDay = 'evening'
      $scope.name = 'Gingerbreak Baby'
    },
  ])
</script>

本文地址：https://blog.csdn.net/hbiao68/article/details/107468664

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网