Menu
After we upgraded our project's AngularJS from 1.2.28 to 1.4.3 the ngRepeat inside an isolated scope stopped evaluate variables. It started printing "{{variableName}}" instead of the value.
Edit: the problem was caused by a patch for iOS8 Webkit bug: https://github.com/angular/angular.js/issues/9128
The issue comes from the wrapping HTML element around the ngRepeat. If I remove it, it works fine. If I remove the isolated scope it works too.
And the most strangest thing is that I tried the same approach on CODE PEN and it works pretty fine but not on our project. Here is the codepen code: http://codepen.io/anon/pen/YXgYjN
Here is the controller:
app.controller('CustomersController', ['$scope', function ($scope) {
$scope.customers = [
{
name: 'David',
street: '1234 Anywhere St.'
},
{
name: 'Tina',
street: '1800 Crest St.'
},
{
name: 'Michelle',
street: '890 Main St.--'
}
];
}]);
And the directive:
app.directive('myIsolatedScope', function () {
return {
restrict: 'E',
replace: true,
scope: {
customers: '='
},
template:
'<p>' +
'<span ng-repeat="(key, customer) in customers" class="{{customer.name}}">Name: {{customer.name}}| Street: {{customer.street}}<br /></span>' +
'</p>',
controller: function($scope, $element, $attrs) {},
compile: function() {},
link: function($scope, $element, $attrs) {}
};
});
The HTML:
<body ng-app="directivesModule" ng-controller="CustomersController">
<h3>Custom Directive</h3>
<my-isolated-scope customers="customers"></my-isolated-scope>
</body>
812
The directive scope uses prefixes to achieve that. Using prefixes helps establish a two-way or one-way binding between parent and directive scopes, and also make calls to parent scope methods. To access any data in the parent scope requires passing the data at two places – the directive scope and the directive tag.
AngularJS ng-repeat Directive The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
It's slow, and it is especially all turns bad on mobile platforms and when you write something something complex. And it is a fundamental part of the framework. Angular even imposes restrictions on how rich UI you can write.
In simple words = is used in directive isolate scope to enable two way binding and @ does not updates model, only updates Directive scope values.
Since the problem was only on our project I started digging and found the root of it. It was because of this patch: https://github.com/angular/angular.js/issues/9128
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
