&安培;运营商不在孤立的指令范围内工作

时间:2014-10-25 20:26:00

标签: javascript angularjs

我正在使用& (表达式绑定)运算符在指令的隔离范围内,但我无法在父控制器上触发函数。控制台上应该有输出,但我没有收到任何输出。

HTML部分:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Directive &</title>

  <script type="text/javascript" src="angular.min.js"></script>
  <script src="isolate_scope_&.js"></script>  

    </head>
    <body ng-app="isolate_scope">
        <div ng-controller="isolateScopeController">
          <b>Ctrl Data</b>
          <div ng-repeat="person in persons">
              <p>{{person.name}}</p>
          </div>
          <b>Directive Data</b>
          <div ng-repeat="person in persons">
              <friends frnd="person.name"></friends>
          </div>
          <my-button isolatedFunction="printScopeToFile()"></my-button>
        </div>
    </body>
    </html>

这是JS部分:

  angular.module('isolate_scope', [])
    .controller('isolateScopeController', function($scope){
      $scope.persons = [
                         {
                           name:"tanmay",
                           age:"28"
                         },
                         {
                           name: "James",
                           age:"28"
                         },
                         {
                           name:"Rylan",
                           age:"26"
                         },
                         {
                            name:"Aditya",
                            age:"23"
                         }
                       ];

      $scope.printScopeToFile = function(){
          console.log("printng to file.....");
          for(var i in $scope.persons){
            console.log("Name = " + $scope.persons[i].name + " Age = " + $scope.persons[i].age);
          }
      };
    })
    .directive('friends',function(){
      return {
          restrict :'E',
          template: '<input type="text" ng-model="name">',
          scope :{
            name:'=frnd'
          }
      };
    })
    .directive('myButton',function(){
      return {
          restrict: 'E',
          template: '<button ng-click="isolatedFunction()">callParentfunction</button>',
          scope : {
            isolatedFunction:"&"
          }
      };
    });

小提琴:http://jsfiddle.net/v51kob1q/

1 个答案:

答案 0 :(得分:1)

isolatedFunction指令中的属性<my-button isolatedFunction...>应该是isolated-functiondash-delimited属性