cgarvis / angular-toggle-switch

AngularJS Toggle Switch
http://cgarvis.github.io/angular-toggle-switch
MIT License
160 stars 124 forks source link

Unexpected behavior when on-label or off-label not include in tag (with angularjs 1.2.0-rc.2) #7

Closed Hypercubed closed 11 years ago

Hypercubed commented 11 years ago

Perhaps it is a difference between angularjs 1.0 and 1.2 but I'm still getting blank labels if the on-label and off-label are not specified in the tag, Meaning $scope.offLabel and $scope.onLabel remain undefined even after the link function is called rather than using the defaults On and Off.

If you are really not going to use two-way binding shouldn't you remove the objects from the scope and use this instead:

      $scope.onLabel = attrs.onLabel || 'On';
      $scope.offLabel = attrs.offLabel || 'Off';

Like I said this may be a difference between 1.0 and 1.2.. or I could just be missing something.

Hypercubed commented 11 years ago

I just tried with angularjs 1.0.8 with the same result. I see the following when I console.log $scope after the defaults should be set:

offLabel: undefined
onLabel: undefined
Hypercubed commented 11 years ago

It fails the following tests:

  describe('when there are no custom labels', function () {
    it('sets the default on label', function() {
      var elm = compileDirective(baseTemplate, $scope);
      expect(elm.text()).toContain('On');
    });
    it('sets the default off label', function() {
      var elm = compileDirective(baseTemplate, $scope);
      expect(elm.text()).toContain('Off');
    });
  });
cgarvis commented 11 years ago

From the Angluar Directive Documentation

@ or @attr - bind a local scope property to the value of DOM attribute. The result is always a string since DOM attributes are strings. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget definition of scope: { localName:'@myAttr' }, then widget scope property localName will reflect the interpolated value of hello {{name}}. As the name attribute changes so will the localName property on the widget scope. The name is read from the parent scope (not component scope).

So using @ gives us interpolate where attrs will not. There are some hacks that can use attrs.$observe but I hasn't have much luck.

cgarvis commented 11 years ago

I've seen AngularUI put the defaults in the template html. I liked having it in the link function to make it clearer. But that might be the best solution here.

cgarvis commented 11 years ago

Fixed in 8fabe8216cab54a5c72f34d87986d5aa771618ce