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

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

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

怪我咯
怪我咯

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

Antworte allen(1)
phpcn_u1582
phpcn_u15822017-05-15 16:52:53 1 Etage

&的用法: 传递一个来自父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>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！