suchen

Heim  >  Fragen und Antworten  >  Hauptteil

angular.js - 如何使用AngularJS隔离作用域中的'&'?

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

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

怪我咯怪我咯2756 Tage vor751

Antworte allen(1)Ich werde antworten

  • phpcn_u1582

    phpcn_u15822017-05-15 16:52:53

    &的用法: 传递一个来自父scope的函数，稍后调用

    什么情况下用：当我们在directive里需要调用controller的方法时，一般我们会在directive里传一些参数到controller的方法里

    实际案例：比如一个树形结构的directive，我们选中某个节点后，需要在controller对这个节点进行更一步的操作，比如根据选中的节点去服务器取数据。所以在directive里面，我们需要把选中的节点传到controller里面。

    Demo

    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>

    Antwort
    0
  • StornierenAntwort