angularjs 控制器和$scope(六)

文章目录

    • 文章参考
    • $scope的属性就是供在视图中展示用的视图模型(view model)
    • $scope 作用域(继承)

文章参考

  1. AngularJS 控制器(Controllers)

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

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

  1. 不传递任何参数
  2. 传递自定义参数
  3. 传递$event 事件

<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()">Chilibutton>
      <button ng-click="jalapenoSpicy($event)">$eventbutton>
      <button ng-click="myParam('huangbiao')">myParambutton>
      <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 层级结构


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

你可能感兴趣的:(angularjs,&,ionic,&)