angular.js - 如何使用AngularJS隔离作用域中的'&'?
怪我咯
怪我咯 2017-05-15 16:50:53
0
1
736

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

<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

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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan