搜索

首页  >  问答  >  正文

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 天前755

全部回复(1)我来回复

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

    回复
    0
  • 取消回复