AngularJS关于 在指令与外部通讯的说明

关于 在指令与外部通讯的说明

1. 关于在指令中使用 &的说明（情况一）

适用于给指令绑定事件，但参数由外部提供

View

<bodyng-app="ui.bootstrap.demo">

<hr>

 <divng-controller="AlertDemoCtrl">

 <alertborder=1ng-repeat="alert1 in alerts"type="{{alert1.type}}"name1="fff()"

  name2="name21(11)"close="closeAlert($index)">dddd{{alert1.msg}}</alert>

<!-- name21是的controller中的方法-->

 <buttonclass='btn btn-default'ng-click="addAlert()">Add Alert</button>

 {{name2}}

</div>

 <script>

Controller

angular.module('ui.bootstrap.demo',['ui.bootstrap.alert'])

.controller('AlertDemoCtrl', function ($scope) {

 $scope.alerts = [

   { type: 'danger',msg: 'Oh snap! Change a few things up and trysubmitting again.' },

   { type: 'success',msg: 'Well done! You successfully read thisimportant alert message.' }

 ];

 

 $scope.addAlert = function() {

   $scope.alerts.push({msg: 'Another alert!'});

 };

 

 $scope.closeAlert = function(index) {

   $scope.alerts.splice(index, 1);

 };

 $scope.j=100;

 $scope.name21= function(i){

    $scope.j=i*100;

    return $scope.j+i+1};

 $scope.fff=function()

  {

    alert(111);

  }

});

 

指令

angular.module('ui.bootstrap.alert',[])

 

.controller('AlertController', ['$scope','$attrs', function ($scope, $attrs){

 $scope.closeable = 'close' in$attrs;

 //$scope.close =close;

 //this.name1= $scope.name1 ;

 $scope.name3=$scope.name2()+1;

//此是name2是外部函数的包装，相当于：

// $scope.name2 =function(){ return$parentScope .name21(11)}

// $parentScope是name21 所在的scope

}])

 

.directive('alert', function () {

 return{

   restrict:'EA',

   controller:'AlertController',

   templateUrl:'alert.html',

   transclude:true,

   replace:true,

   scope: {

     type: '@',

     close: '&',

     name1:'&',

     name2:'&'

   }

 };

})

 

.directive('dismissOnTimeout', ['$timeout',function($timeout) {

 return{

   require: 'alert',

   link: function(scope, element, attrs, alertCtrl) {

     $timeout(function(){

        alertCtrl.close();

     }, parseInt(attrs.dismissOnTimeout, 10));

   }

 };

}]);

 

1. 关于 在指令中使用 & 的说明（情况二）

此种方式相当于给指令传入事件响应函数

View

<bodyng-app="ui.bootstrap.demo">

<hr>

 <divng-controller="AlertDemoCtrl">

 <alertborder=1ng-repeat="alert1 in alerts"type="{{alert1.type}}"name1="fff()"

  name2="name21"close="closeAlert($index)">dddd{{alert1.msg}}</alert>

 <buttonclass='btn btn-default'ng-click="addAlert()">Add Alert</button>

 {{name2}}

</div>

 <script>

 

 </script>

</body>

</html>

Controller

angular.module('ui.bootstrap.demo',['ui.bootstrap.alert'])

.controller('AlertDemoCtrl', function ($scope) {

 $scope.alerts = [

   { type: 'danger',msg: 'Oh snap! Change a few things up and trysubmitting again.' },

   { type: 'success',msg: 'Well done! You successfully read thisimportant alert message.' }

 ];

 

 $scope.addAlert = function() {

   $scope.alerts.push({msg: 'Another alert!'});

 };

 

 $scope.closeAlert = function(index) {

   $scope.alerts.splice(index, 1);

 };

 $scope.j=100;

 $scope.name21= function(i){

    $scope.j=i*100;

    return $scope.j+i+1};

 $scope.fff=function()

  {

    alert(111);

  }

});

Directive

angular.module('ui.bootstrap.alert',[])

 

.controller('AlertController', ['$scope','$attrs', function ($scope, $attrs){

 $scope.closeable = 'close' in$attrs;

 //$scope.close =close;

 //this.name1= $scope.name1 ;

 $scope.name3=$scope.name2()(10)+1;

//此是name2是外部函数的包装，相当于：

// $scope.name2 = function(){

//  return parentGet(i){ return //$parentScope .name21(i)}

//$parentScope是 name21 所在的scope

}])

 

.directive('alert', function () {

 return{

   restrict:'EA',

   controller:'AlertController',

   templateUrl:'alert.html',

   transclude:true,

   replace:true,

   scope: {

     type: '@',

     close: '&',

     name1:'&',

     name2:'&'

   }

 };

})

 

.directive('dismissOnTimeout', ['$timeout',function($timeout) {

 return{

   require: 'alert',

   link: function(scope, element, attrs, alertCtrl) {

     $timeout(function(){

        alertCtrl.close();

     }, parseInt(attrs.dismissOnTimeout, 10));

   }

 };

}]);

1. 关于在指令中使用 @的说明（情况二）

此种适用于外部向指令传入参数

View

<bodyng-app="ui.bootstrap.demo">

<hr>

 <divng-controller="AlertDemoCtrl">

 <alertborder=1ng-repeat="alert1 in alerts"type="{{alert1.type}}"name1="fff()"

  name2="{{j}}"close="closeAlert($index)">dddd{{alert1.msg}}</alert>

 <buttonclass='btn btn-default'ng-click="addAlert()">Add Alert</button>

 {{name2}}

</div>

 <script>

 

 </script>

</body>

</html>

 

Controller

angular.module('ui.bootstrap.demo',['ui.bootstrap.alert'])

.controller('AlertDemoCtrl', function ($scope) {

 $scope.alerts = [

   { type: 'danger',msg: 'Oh snap! Change a few things up and trysubmitting again.' },

   { type: 'success',msg: 'Well done! You successfully read thisimportant alert message.' }

 ];

 

 $scope.addAlert = function() {

   $scope.alerts.push({msg: 'Another alert!'});

 };

 

 $scope.closeAlert = function(index) {

   $scope.alerts.splice(index, 1);

 };

 $scope.j=100;

 $scope.name21= function(i){

    $scope.j=i*100;

    return $scope.j+i+1};

 $scope.fff=function()

  {

    alert(111);

  }

});

directive

angular.module('ui.bootstrap.alert',[])

 

.controller('AlertController', ['$scope','$attrs', function ($scope, $attrs){

 $scope.closeable = 'close' in$attrs;

 //$scope.close =close;

 //this.name1= $scope.name1 ;

 $scope.name3=$scope.name2+1;

//name2是外部传入的表达式的值

}])

 

.directive('alert', function () {

 return{

   restrict:'EA',

   controller:'AlertController',

   templateUrl:'alert.html',

   transclude:true,

   replace:true,

   scope: {

     type: '@',

     close: '&',

     name2:'@' //此处是表格式{{j}}的值，即把在外部把j计算后的值传入到此处

   }

 };

})

 

.directive('dismissOnTimeout', ['$timeout',function($timeout) {

 return{

   require: 'alert',

   link: function(scope, element, attrs, alertCtrl) {

     $timeout(function(){

        alertCtrl.close();

     }, parseInt(attrs.dismissOnTimeout, 10));

   }

 };

}]);

 

 

1. 关于 在指令中使用 @的说明（情况二）

View

<bodyng-app="ui.bootstrap.demo">

<hr>

 <divng-controller="AlertDemoCtrl">

 <alertborder=1ng-repeat="alert1 in alerts"type="{{alert1.type}}"name1="fff()"

  name2="j"close="closeAlert($index)">dddd{{alert1.msg}}</alert>

 <buttonclass='btn btn-default'ng-click="addAlert()">Add Alert</button>

 {{name2}}

</div>

 <script>

 

 </script>

</body>

</html>

Controller

angular.module('ui.bootstrap.demo',['ui.bootstrap.alert'])

.controller('AlertDemoCtrl', function ($scope) {

 $scope.alerts = [

   { type: 'danger',msg: 'Oh snap! Change a few things up and trysubmitting again.' },

   { type: 'success',msg: 'Well done! You successfully read thisimportant alert message.' }

 ];

 

 $scope.addAlert = function() {

   $scope.alerts.push({msg: 'Another alert!'});

 };

 

 $scope.closeAlert=function(index){

   $scope.alerts.splice(index, 1);

 };

 $scope.j=100;

 $scope.name21= function(i){

    $scope.j=i*100;

    return $scope.j+i+1};

 $scope.fff=function()

  {

    alert(111);

  }

});

Directive

angular.module('ui.bootstrap.alert',[])

 

.controller('AlertController', ['$scope','$attrs', function ($scope, $attrs){

 $scope.closeable = 'close' in$attrs;

 //$scope.close =close;

 //this.name1= $scope.name1 ;

 $scope.name3=$scope.name2+1;

}])

 

.directive('alert', function () {

 return{

   restrict:'EA',

   controller:'AlertController',

   templateUrl:'alert.html',

   transclude:true,

   replace:true,

   scope: {

     type: '@',

     close: '&',

     name2:'=' //此处把外部传入的字符串视为表达式传入,表达式是在外部的scope中计算

   }

 };

})

 

.directive('dismissOnTimeout', ['$timeout',function($timeout) {

 return{

   require: 'alert',

   link: function(scope, element, attrs, alertCtrl) {

     $timeout(function(){

        alertCtrl.close();

     }, parseInt(attrs.dismissOnTimeout, 10));

   }

 };

}]);

 

1. 关于 在指令中使用 = 的说明（情况二）

View

<bodyng-app="ui.bootstrap.demo">

<hr>

 <divng-controller="AlertDemoCtrl">

 <alertborder=1ng-repeat="alert1 in alerts"type="{{alert1.type}}"name1="fff()"

  name2="name21(11)"close="closeAlert($index)">dddd{{alert1.msg}}</alert>

 <buttonclass='btn btn-default'ng-click="addAlert()">Add Alert</button>

 {{name2}}

</div>

 <script>

 

 </script>

</body>

</html>

Controller

angular.module('ui.bootstrap.demo',['ui.bootstrap.alert'])

.controller('AlertDemoCtrl', function ($scope) {

 $scope.alerts = [

   { type: 'danger',msg: 'Oh snap! Change a few things up and trysubmitting again.' },

   { type: 'success',msg: 'Well done! You successfully read thisimportant alert message.' }

 ];

 

 $scope.addAlert = function() {

   $scope.alerts.push({msg: 'Another alert!'});

 };

 

 $scope.closeAlert = function(index) {

   $scope.alerts.splice(index, 1);

 };

 $scope.j=100;

 $scope.name21= function(i){

    $scope.j=i*100;

    return $scope.j+i+1};

 $scope.fff=function()

  {

    alert(111);

  }

});

Directive

angular.module('ui.bootstrap.alert',[])

 

.controller('AlertController', ['$scope','$attrs', function ($scope, $attrs){

 $scope.closeable = 'close' in$attrs;

 //$scope.close =close;

 //this.name1= $scope.name1 ;

 $scope.name3=$scope.name2+1;

}])

 

.directive('alert', function () {

 return{

   restrict:'EA',

   controller:'AlertController',

   templateUrl:'alert.html',

   transclude:true,

   replace:true,

   scope: {

     type: '@',

     close: '&',

     name2:'='//此处相当于在外部的scope中计算表达式name21(11)后把值传入

   }

 };

})

 

.directive('dismissOnTimeout', ['$timeout',function($timeout) {

 return{

   require: 'alert',

   link: function(scope, element, attrs, alertCtrl) {

     $timeout(function(){

        alertCtrl.close();

     }, parseInt(attrs.dismissOnTimeout, 10));

   }

 };

}]);

1. 关于在指令中使用 =的说明（情况二）

适用于给指令绑定事件，但参数由指令提供

 

View
<body ng-app="ui.bootstrap.demo">

<hr>

 <divng-controller="AlertDemoCtrl">

 <alertborder=1ng-repeat="alert1 in alerts"type="{{alert1.type}}"name1="fff()"

  name2="name21"close="closeAlert($index)">dddd{{alert1.msg}}</alert>

 <buttonclass='btn btn-default'ng-click="addAlert()">Add Alert</button>

 {{name2}}

</div>

 <script>

 

 </script>

</body>

Controller

angular.module('ui.bootstrap.demo',['ui.bootstrap.alert'])

.controller('AlertDemoCtrl', function ($scope) {

 $scope.alerts= [

   { type: 'danger',msg: 'Oh snap! Change a few things up and trysubmitting again.' },

   { type: 'success',msg: 'Well done! You successfully read thisimportant alert message.' }

 ];

 

 $scope.addAlert = function() {

   $scope.alerts.push({msg:'Another alert!'});

 };

 

 $scope.closeAlert = function(index) {

   $scope.alerts.splice(index,1);

 };

 $scope.j=100;

 $scope.name21= function(i){

    $scope.j=i*100;

    return $scope.j+i+1};

 $scope.fff=function()

  {

    alert(111);

  }

});

Directive

angular.module('ui.bootstrap.alert',[])

 

.controller('AlertController', ['$scope','$attrs', function ($scope, $attrs){

 $scope.closeable = 'close' in$attrs;

 //$scope.close =close;

 //this.name1= $scope.name1 ;

 $scope.name3=$scope.name2(11)+1;

}])

 

.directive('alert', function () {

 return{

   restrict:'EA',

   controller:'AlertController',

   templateUrl:'alert.html',

   transclude:true,

   replace:true,

   scope: {

     type: '@',

     close: '&',

     name2:'=' //此处相当于把外部的函数传入到此处，即 name2= $parentScope.name21

   }

 };

})

 

.directive('dismissOnTimeout', ['$timeout',function($timeout) {

 return{

   require: 'alert',

   link: function(scope, element, attrs, alertCtrl) {

     $timeout(function(){

        alertCtrl.close();

     }, parseInt(attrs.dismissOnTimeout, 10));

   }

 };

}]);