Angular 1.2.17 - > 1.2.18：在ng-repeat中的ng-transclude，作用域差異

我正在從angularJs 1.2.17升級到1.2.18，並且有一些變化正在破壞我們使用角度的方式。我已經能夠用jsFiddle重現這個問題。Angular 1.2.17 - > 1.2.18：在ng-repeat中的ng-transclude，作用域差異

我們做錯了什麼？是否有一個小的調整，使該示例與角1.2.18工作？

的jsfiddle 1.2.17（工作）：http://jsfiddle.net/HB7LU/8829/

的jsfiddle 1.2.18（不工作）：http://jsfiddle.net/HB7LU/8828/

HTML

<body ng-app="myApp"> 
    <div ng-controller="MyCtrl"> 
     <div ng-init="group = groups[0]"> 
      <div simple-checkbox></div> 
     </div> 
     <div ng-init="group = groups[1]"> 
      <div image-checkbox></div> 
     </div>   
    </div> 
</body>

var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 
    $scope.groups = [{ 
     names: ['One', 'Two', 'Three'] 
    },{ 
     names: ['Four', 'Five', 'Six'] 
    }]; 
} 

myApp.directive('simpleCheckbox', function() { 
    return { 
     scope: true, 
     template: '<div checkbox>{{name}}</div>' 
    }; 
}); 

myApp.directive('imageCheckbox', function() { 
    return { 
     scope: true, 
     template: '<div checkbox><img ng-src="http://placekitten.com/g/10/10" /> {{name}}</div>' 
    }; 
}); 

myApp.directive('checkbox', function() { 
    return { 
     scope: true, 
     transclude: true, 
     template: '<div ng-repeat="name in group.names"><input type="checkbox" id="{{name}}"><label for="{{name}}" ng-transclude></label></div></div>' 
    }; 
});

來源

2014-12-05 Daniel Ignat

這些似乎非常相關https://github.com/angular/angular.js/issues/7842 https://github.com/angular/angular.js /問題/ 7874 – 2014-12-05 14:19:04

我解決了這個在這些問題提供的幫助：

https://github.com/angular/angular.js/issues/7842

https://github.com/angular/angular.js/issues/7874

工作的jsfiddle與角1.2.18：

http://jsfiddle.net/HB7LU/8828/

HTML

<body ng-app="myApp"> 
    <div ng-controller="MyCtrl"> 
     <div ng-init="group = groups[0]"> 
      <div simple-checkbox></div> 
     </div> 
     <div ng-init="group = groups[1]"> 
      <div image-checkbox></div> 
     </div>   
    </div> 
</body>

神奇的指令

myApp.directive('transcludeWithInsideScope', function() { 
    return { 
     link: { 
      pre: function (scope, element, attr, ctrl, transclude) { 
       if(transclude) { 
        transclude(scope, function (clone) { 
         element.append(clone); 
        }); 
       } 
      } 
     } 
    }; 
});

所有的JS

var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 
    $scope.groups = [{ 
     names: ['One', 'Two', 'Three'] 
    },{ 
     names: ['Four', 'Five', 'Six'] 
    }]; 
} 

myApp.directive('simpleCheckbox', function() { 
    return { 
     scope: true, 
     template: '<div checkbox>{{name}}</div>' 
    }; 
}); 

myApp.directive('imageCheckbox', function() { 
    return { 
     scope: true, 
     template: '<div checkbox><img ng-src="http://placekitten.com/g/10/10" /> {{name}}</div>' 
    }; 
}); 

myApp.directive('checkbox', function() { 
    return { 
     scope: true, 
     transclude: true, 
     template: '<div ng-repeat="name in group.names"><input type="checkbox" id="{{name}}"><label for="{{name}}" transclude-with-inside-scope></label></div></div>' 
    }; 
}); 

myApp.directive('transcludeWithInsideScope', function() { 
    return { 
     link: { 
      pre: function (scope, element, attr, ctrl, transclude) { 
       if(transclude) { 
        transclude(scope, function (clone) { 
         element.append(clone); 
        }); 
       } 
      } 
     } 
    }; 
});

來源

2014-12-05 14:49:45

Angular 1.2.17 - > 1.2.18：在ng-repeat中的ng-transclude，作用域差異

回答

相關問題