recherche

Maison  >  Questions et réponses  >  le corps du texte

angulaire.js - Comment isoler '&' dans la portée à l'aide d'AngularJS ?

« @ » et « = » sont faciles à comprendre. Existe-t-il un scénario dans lequel « & » doit être utilisé ?

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

J'espère que vous pourrez fournir une démo.

怪我咯怪我咯2756 Il y a quelques jours754

répondre à tous(1)je répondrai

  • phpcn_u1582

    phpcn_u15822017-05-15 16:52:53

    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>

    répondre
    0
  • Annulerrépondre