pasvaz / bindonce Goto Github PK

After upgrading to get the newest changes, boShow is not removing "display: none" when bindonce watch is firing.

It would be nice for

Hello! I'm running Angular 1.2rc1 and getting this error with all BO directives:

Error: [$compile:ctreq] Controller 'bind once', required by directive 'boText', can't be found!

The HTML that triggers it is just

I've added bo as an app dependency, what else do I need to do?

as of version 1.2 , $sce enable by default
change ng-bind-html to bo-html will be empty

Hello,

I would like to use this princable in my own custom directive. It simple checks if an url is allowed (by looking it up in an array returned from the server) to determine if it should show a link or just a span tag with the contents.

When the permissions get updated I fire an event and the directive recalculates the permissions.

<span auth-link-to url="#/{{user}}/cookies/{{cookies.id}}">
      {{cookies.name}}
    </span>

The directive

Directives.directive('AuthLinkTo', ['Authorization',
  (Authorization) ->
    checkUrl = (rawUrl) ->
      if rawUrl?
        allowed = Authorization.allow(rawUrl)
      else
        allowed = false
        console.warn "No url specified in auth-link-to, permission set to false"

      return {
        url: (if allowed then rawUrl else null),
        allowed: allowed
      }


    link = (scope, element, attrs) ->
      result = checkUrl(scope.url)
      scope.allowed = result.allowed
      scope.url = result.url

      scope.$on('authorizationUpdate', ->
        result = checkUrl(scope.url)
        scope.allowed = result.allowed
        scope.url = result.url
      )


    return {
      restrict: 'E',
      scope: {
        url: '@'
      },
      link: link,
      transclude: true,
      priority: 0,
      replace: true,
      templateUrl: "templates/directives/auth_link_to"
    }
  ])

So how can I prevent the creation of any watcher in my code (the url for example is always static, only the permissions in the service maybe change over time)

Thanks a lot for the awesome speed improvements!

In the code below:
<a bo-class='{label-positive: model.positive}' class="label float-label label-level-{{model.level}}"></a>

The "label-positive" class will never get attached. If the {{model.level}} interpolation is removed, it is added fine.

The following works perfectly.
<a ng-class='{label-positive: model.positive}' class="label float-label label-level-{{model.level}}"></a>

could this be an issue with directive priority?

bo-style returns [object object] instead of something usable

You can't easily convert the style into a string either, I'm not sure what the problem is but angular should have taken care of this?

This is an IE8 error I'm having, any idea what can be casusing it?

Thanks

Hey, I think bindonce should support animations when ngAnimate is included. This is necessary if you want to show something once, and need an animation there. Also, 1.2 is the current stable release, so support for 1.0.x can be removed.

First I created template like this:

<img src="data:image/jpeg;base64,{{new.ImageSmall}}">

And the angularjs databinding with image src worked as expected.

Then I tried to use this module with img src attributes, which contain base64 string, presenting image resource, like this:

<img bo-src="'data:image/jpeg;base64,' + new.ImageSmall">

But this doesn't work. Is there another way to pass expression to img src?

This is not working because ngInclude reads the 'src' attribute on complie time, but boSrc sets 'src' only during linking (changing priority don't change this either). But anyway ngInclude would create a watcher on that attribute, so it makes maybe no sense to use boSrc here.

Is this a bug anyway?

is there the possibility to add bo-repeat?

i'm interested to do things like:

<div bindonce="antani">
  <div bo-repeat=""field in antani.fields"></div>
</div>

As this very silly plunkr demonstrates it's possible (theoretically) to go through all the children in the template when compiling, and switch the ng- directives for bo- ones.

Is there a reason not to offer this or just do it always?

http://plnkr.co/edit/ay8UrdqNSFi8WxHaGlAn?p=preview

This is a feature request, though I'm not really sure how you would go about doing it. I've done some research, and it hasn't really gotten me anywhere, so I figured I'd post this here in case anyone has any suggestions on how to create this. I ask for your patience while I explain our problem:

I love the idea behind bindonce. In our app, we have a TON of content that gets loaded asynchronously from our REST api, and then gets plugged into the DOM once the api call has returned. For ease-of-use, we use interpolated expressions to bind that content from the $scope to the DOM so that it is displayed to the user (which is obviously what $watchers and interpolation was designed for). The problem, as stated perfectly in your README, is that the content never changes again once it's loaded from the api. But we still end up with countless watchers all over the place that are watching for changes to $scope properties that are never going to change.

In comes bindonce to save the day. It solves this problem beautifully. But I have one minor complaint. Most of the dynamic api content that I'm referring to is just text. So we use the bo-text directive a lot. The problem with the bo-text directive is that its just that. A directive. And so in order to use it, you have to put it on some DOM element, which we typically end up using <span>s for. We have lots of <span bo-text="obj.name"></span> statements all over in our markup. That can get really annoying and verbose to have to use all that markup to replace what we used to do with `{{obj.name}}'.

So my feature request: does anyone know of a way to do custom interpolated binding with angular? What I would like to do is to be able to use some special binding syntax to indicate that I want to interpolate the expression, but using the bindonce "no watcher" technique, rather than the typical angular method.

For example, I'd like to be able to do the following:

<div class="my-div">
    <label>Some Text</label>
    {{{obj.name}}} can be used with {{{obj.value}}}
</div>

Using the custom triple-brace syntax would automatically do a "bind once" for the expression and would then remove the watcher. And it doesn't necessarily have to be triple braces, it could be any sort of parsing delimiter (such as <%, %> or {[{, }]} or whatever).

Is that even possible? I tried researching more about angular's $interpolate service and tried creating a decorator that would decorate the $interpolateProvider with this extra functionality, but I couldn't find a way to do it. Any ideas?

Thanks.

... and specify that bo-for was removed between 0.1.1 and 0.2.1, the work-around is to replace bo-for by bo-attr bo-attr-for.

I'm trying to print something that's got a filter, which returns it as $sce.trustAsHtml(), using bo-html, it works fine using ng-bind-html but doesn't show anything, nor throws any error using bo-html..

Hi, first of all congratulations for your script, pretty nifty indeed!
I'd like to ask if it is currently possible to use angular filters (even custom ones) within bindonce.
I'd like to be able to use bindonce to convert i.e. the following tag:

<div ng-repeat="someVar in someVarArray">
    //...
    <span>{{someVar | myFilter}}</span>
    //...
</div>

I tried with:

<div bindonce ng-repeat="someVar in someVarArray">
    //...
    <span bo-text="$filter('myFilter')(someVar)"></span>
    //...
</div>

but unfortunately it didn't work. Hints?
Thanks in advance,

Andy

Hey, y'all.

Thanks for the amazing directive.

Here's a small and helpful regex to replace curly data binds with spans:

\<span\>\{\{\s*(.*?)\s*\}\}\<\/span\>|(?<!")\{\{\s*(.*?)\s*\}\}(?!")

It should be replaced with:

<span bo-text="$1$2"></span>

Hope this helps someone. You can test it over here: https://www.debuggex.com/r/GyjWVWWt0odroRJd

I am using bindonce in phonegap Android App and getting an error "object has no method forEach". I am using bindonce with Angular 1.2.13.

03-01 04:14:28.944: I/chromium(1397): [INFO:CONSOLE(239)] "Uncaught TypeError: Object # has no method 'forEach'", source: file:///android_asset/www/lib/bindonce.js (239)

I am using angular-loader and script.js for loading angular modules asynchronously.
please suggest what was the caused?

assumed that we have

<ng-repeat="product in products">
<div bindonce="product">
  <span bo-text="product.name" />
  <span bo-text="product.desc" />
</div>
</ng-repeat>

and if I replace products with a new array, can we somehow let bindonce rerender again?

Collection change does not re-render content in angularjs 1.2.0rc1. It does work in angularjs 1.0.7 and 1.0.5.

I have a lot of data that occasionally changes, but is very expensive to $watch - 500kb data urls. Even with only a dozen on the screen my 2014 MBP slows to a few FPS.

I am interested in firing an event when the user changes the image (I can isolate all of the ways the image might change). The event would alert bindonce that it should re-fetch its value and set it again on all its children.

Does this seem like a valuable extension? I can make an initial attempt at the code and submit a PR if it seems like this would be inline with the project.

Thanks!

My most common use case for bindonce is a mostly-static list of options to go inside a select element, but I can't figure out how to do it properly.

I tried doing the following, but it stopped binding to my specified ngModel.

<select ng-model='state'>
  <option bindonce ng-repeat='state in states' bo-value='state.abbr' bo-text='state.name'></option>
</select>

Even if I do get this to work, it would be great if I there were a bo-options for use on select elements.

{ directiveName: 'boSwitchWhen', transclude: 'element', priority: 800, require: '^boSwitch', },
{ directiveName: 'boSwitchDefault', transclude: 'element', priority: 800, require: '^boSwitch', }

IE browser is throwing syntax error at the above line of code.
The comma at the end needs to be removed. Please re-release this version with the fix.

Maybe i'm missing something simple.
It's loading the file and the the module is defined but i still get one

Error: [$compile:ctreq] Controller 'bindonce', required by directive 'undefined', can't be found!

for every bo-* directive i use.

--- This appears to be #16

Rather than many complex bo-ifs, it would be nice if there was a watchless equivalent of ng-switch

Consider wrapping bindonce.js in an iife to isolate the 'use strict' statement.

Sorry for creating yet another issue, but it would only seem logical to have a bo-style and bo-class that support interpolation.

So that we can use something along the lines of bo-class-i="size-{{element.size}}" and

bo-style-i="{'background-image': {{element.image}}, 'background-color': {{element.color}}}"

Right now I can work around this issue by using a function that returns the values.

For example:

bo-style="getAppImgStyle(app)"

$scope.getAppImgStyle = function(app) {
      return {
        'background-image': 'url(' + app.image + ')',
        'background-color': app.color
      };
    };

But this workaround kind of pollutes the directive/controller with unnecessary functions.

Hi,

If I want to list a collection of phone numbers for a collection of users what should I do to limit the numbers of $watch ?

For example:

<div bindonce ng-repeat="user in users">
    <div bo-text="user.name"></div>
    <ul>
        <li bindonce ng-repeat="number in user.phonenumbers">
            <div bo-text="number.value"></div>
        </li>
    </ul>
</div>

It seems that I can't prevent the second ng-repeat from adding watchers.

Hope my question is clear.
Thanks

ng-repeat registers a collection watcher (with $watchCollection), which can be costly, especially when considering ng-repeat based recursive directives (as in http://jsfiddle.net/n8dPm/).

I was wondering if a bindonce type repeater would make sense. That repeater would wait for the collection to be there, but wouldn't shallow-watch the collection.

Not sure it makes sense. Feel free to close this issue if it doesn't. Thanks.

Hello,

A transparent character break the build at line 22.

Thank's
Hikkyu

A regular {{item.value}} in a template would still create a watcher, right? So the solution with bindonce would be

 <span bo-bind="item.value"></span>

Or is there a more concise way?

Hi,

I'd like to add button events, e.g. bo-click-i='..'

This seems to work...

                        case 'click':
                            binder.element.on( binder.attr, function (event)
                            {
                                $scope.$eval( value );
                            }
                            );

...

{ directiveName: 'boClickI', attribute: 'click', interpolate: true  },

should probably be bumped to 0.2.0 to match bower?

Good morning,

First, let me say, I love your work. I'm using it in a project and have run into an odd situation. it seems that every instance of bo-* creates a $scope. Is that normal? could i be doing it wrong? Is there a way to prevent that?

I'm using bindonce to cut down on watchers in a table I'm generating. 10rows X 17 columns, and the bindonce directive is on the Row , and the bo-Text calls are within spans. in fact here's an abreviated code snippet:

<tr ng-repeat="row in $data" ng-click="selectPanel(row)" bindonce="row" >
<td data-title="">
<i warnings-popover="{{ row.warning_message }}" 
popover-placement="right" bo-if="row.warning_message" class="glyphicon glyphicon-warning-sign" style="color: #8B0000; font-size: 14px;"/>
</td>
<apex:repeat value="{!fields}" var="col"> 
<td data-title="'{!col.Field_Label__c}'" sortable="'{!col.fieldPath__c}'" nowrap="nowrap" filter="{'{!col.fieldPath__c}':'{!col.Filter_Type__c}'} " >
<span 
bo-if="'{!col.Type__c}'.toUpperCase() == 'date'.toUpperCase()" 
bo-text="row['{!col.fieldPath__c}'] | date: 'MM/dd/yyyy'"
/>
<span 
bo-if="'{!col.Type__c}'.toUpperCase() == 'datetime'.toUpperCase()"
bo-text="row['{!col.fieldPath__c}'] | date: short"
/>

Hey,

What's the equivalent of this with "bo-" directives?

<div class="myclass {{item.status}}></div>

Add the value attribute to bindonce

I got an infinite recursion when using some directives from bindonce. The code looks like this:

<ul bindonce="fieldsData">
    <li ng-repeat="field in fieldsData">
        <span bo-if="field.type === 'string'" class="value" bo-text="field.value"></span>
        <ul bo-if="field.type === 'array'" class="inline-list value">
            <li ng-repeat="listItem in field.value">{{ listItem }}</li>
        </ul>
    </li>
</ul>

And I get an infinite recursion as shown on the screenshot (notice the cycle in stacktrace).

bo-* directives don't seem to be evaluated when they are inside a bo-if.

http://plnkr.co/edit/bBYB49wfuaBkJs9JfDa9?p=preview

Unless I'm doing something wrong

Is it possible to force refresh of bindonce item?

false alarm

I'm getting this error of "No controller: bindonce" when I try to use bindonce. I have included it in my module as a dependency:

window.appular = angular.module("app", ['ngResource', 'ngSanitize', 'pasvaz.bindonce']).config [...

And I checked and the bindonce.js I got from the master branch is in the HTML page. any ideas?

here is one example that I tried to use in HTML:

<span class="glyphicon glyphicon-info-sign" bo-show="shift.remarks.length > 0">

Could you please specify less restrictive version dependency for angular in bower.json? >=1 would be fine.
angular 1.2 will be here soon, also people use bindonce with 1.1.x without problems as well as I am.

Update the existing js with this version and you'll see the exceptions in the browser console -- was using the latest Chrome

Is there any particular reason why there's no bracket version of bo-text, similar to angular's ng-bind / {{}} combo? Is it not possible, or none thought about it before?

I'm gonna be the noob here but I can't figure out this simple case.

<div class="navbar navbar-default navbar-fixed-top">

  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul bindonce="navigation" class="nav navbar-nav">
      <li class="{{item.id === searchParams.view ? 'active' : ''}}" ng-repeat="item in navigation.slice(0, 6)">
        <a ng-click="doGlobalSearch({view: item.id})">
          <span bo-text="item.label"></span>
          <span class="badge badge-info" bo-text="item.count | number"></span>
        </a>
      </li>
      <li class="dropdown" ng-if="navigation.length > 6">
        <a class="dropdown-toggle"><span ng-bind="'_More_' | i18n"></span> <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li ng-class="item.id === searchParams.view ? 'active' : ''" ng-repeat="item in navigation.slice(6)">
            <a ng-click="doGlobalSearch({view: item.id})">
              <span>{{item.label}}</span>
              <span class="badge badge-info">{{item.count | number}}</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

</div>

This code works with default angular directives. But since I use bindonce directives, values do not display.

I have read in #25 that the documentation is not totally reliable so what is it I am missing?

Recently updated to the latest version and noticed that bo-* directives no longer work when contained in directives with isolated scopes. Was this intentional/known?

see plunkr: http://plnkr.co/edit/9QzBPAeY6M31g8a7YuxQ?p=preview

This ends up with an error: Error: [$compile:ctreq] Controller 'bindonce', required by directive 'a', can't be found!.

If you remove the bo-if, however, bo-href works normally.

Bindonce doesn't seem to play well with AngularJs promises. (v1.2.11)

This doesn't work:

$scope.app = App.get({id: Id}, function (result) {
    // This callback is used purely for debugging
    console.log('Got app details', result);
});

But this does:

App.get({id: Id}, function (result) {
    // This callback is used purely for debugging
    console.log('Got app details', result);

    $scope.app = result;
});

AngularJs wil automatically fill the scope variable with the values of the promise when it's returned and set the $promise.resolved to true.

Note that at initialization, the promise is created but not resolved. ($promise.resolved = false)

That doesn't play well with bindonce, because bindonce will wait until a scope variable is set. But it's set with $promise.resolved = false.

What I propose is checking a scope variable for the $promise object, and when it's present wait until it is resolved (or not).

I regret that I currently don't have the time to create a pull request for this, but using my solution I can work around this issue for now.