简体中文(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
731

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

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

怪我咯
怪我咯

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

répondre à tous(1)
phpcn_u1582
phpcn_u15822017-05-15 16:52:53 1 plancher

Utilisation de

& : transmettre une fonction depuis la portée parent et appeler

plus tard

Quand l'utiliser : Lorsque nous devons appeler une méthode de contrôleur dans une directive, nous transmettons généralement certains paramètres de la directive à la méthode du contrôleur

Cas réel : par exemple, dans une directive structurée en arborescence, après avoir sélectionné un nœud, nous devons effectuer d'autres opérations sur le nœud dans le contrôleur, comme aller sur le serveur pour récupérer des données en fonction du nœud sélectionné. Donc dans la directive, nous devons transmettre le nœud sélectionné au contrôleur.

Démo

Code démo : 

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>



mon-dialog-close.html :

<p class="alert">
  <a href class="close" ng-click="close()">&times;</a>
  <p ng-transclude></p>
</p>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！