简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
angular.js - 如何使用AngularJS隔离作用域中的'&'?
怪我咯
怪我咯 2017-05-15 16:50:53
0
1
703

‘@’和'='倒是好理解，有没有一个必须使用'&'的场景?

<body ng-app="myApp" ng-init="content='abc'">
<p ng-controller="myController" >
    <input type="text" ng-model="content" />
    <p my-directive my-title="title" my-content="content" ></p>
</p>
</body>
<script type="text/javascript">
var myApp = angular.module('myApp', [])
.directive('myDirective', function($rootScope) {
    return {
        priority:1000,
        restrict: 'A',
        replace: true,
        scope: {
            myTitle:'@',
            myContent: '='
        },
        template: '<p><h2>{{myTitle}}</h2><p>from myDirective:{{myContent}}</p></p>'
    };
})  
.controller('myController',function($scope){
    $scope.content = 'from controller';
});
</script>

希望可以提供一个demo。

怪我咯
怪我咯

走同样的路，发现不同的人生

membalas semua(1)
phpcn_u1582
phpcn_u15822017-05-15 16:52:53 Tingkat 1

Penggunaan

&: Lulus fungsi daripada skop induk dan panggil

kemudian

Bila hendak menggunakannya: Apabila kita perlu memanggil kaedah pengawal dalam arahan, kita biasanya menghantar beberapa parameter dalam arahan kepada kaedah pengawal

Kes sebenar: Contohnya, dalam arahan berstruktur pokok, selepas kami memilih nod, kami perlu melakukan operasi selanjutnya pada nod dalam pengawal, seperti pergi ke pelayan untuk mendapatkan semula data berdasarkan nod yang dipilih. Jadi dalam arahan, kita perlu menghantar nod yang dipilih kepada pengawal.

Demo

Kod demo: 

javascriptangular.module('docsIsoFnBindExample', [])
.controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
  $scope.name = 'Tobias';
  $scope.message = '';
  $scope.hideDialog = function (message) {
    $scope.message = message;
    $scope.dialogIsHidden = true;
    $timeout(function () {
      $scope.message = '';
      $scope.dialogIsHidden = false;
    }, 2000);
  };
}])
.directive('myDialog', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {
      'close': '&onClose'
    },
    templateUrl: 'my-dialog-close.html'
  };
});

html<p ng-controller="Controller">
  {{message}}
  <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog(message)">
    Check out the contents, {{name}}!
  </my-dialog>
</p>



my-dialog-close.html:

<p class="alert">
  <a href class="close" ng-click="close()">&times;</a>
  <p ng-transclude></p>
</p>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！