angular.js - Bagaimana untuk mengasingkan '&' dalam skop menggunakan AngularJS?
怪我咯
怪我咯 2017-05-15 16:50:53
0
1
786

‘@’ dan ‘=’ mudah difahami. Adakah terdapat senario di mana ‘&’ mesti digunakan?

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

Saya harap anda boleh menyediakan 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