Git Product home page Git Product logo

Comments (5)

vitalets avatar vitalets commented on June 5, 2024

hi, @Deraen you raised good point.
When loading content via templateUrl or ng-include it's always creates new scope and form variable created there and can't be linked with elements.
The only solution in current code that I found is:

  1. for directive - to use template instead of templateUrl
  2. for ng-include - to load only buttons from separate file, but <form> tag put in html.

Please have a look on updated plunker http://plnkr.co/edit/ljHaiCdPa4hm6vigBfGY?p=preview
and share your thoughts.
thx!

from angular-xeditable.

Deraen avatar Deraen commented on June 5, 2024

Thanks,

I guess I'll use directive with template for now. It must be about the only thing I didn't try myself :)

Though it would be nice to have template in html-file... Seems a bit strange to me that templateUrl would create new scope when directive specifically says it shouldn't have own scope.

from angular-xeditable.

vitalets avatar vitalets commented on June 5, 2024

Yes, directive with scope: false does not create scope, but templateUrl that works like ng-include does.
I'll keep issue open to think about it in hte future ..

from angular-xeditable.

mitcht avatar mitcht commented on June 5, 2024

Closed as being too old

from angular-xeditable.

erperejildo avatar erperejildo commented on June 5, 2024

hi, @Deraen you raised good point.
When loading content via templateUrl or ng-include it's always creates new scope and form variable created there and can't be linked with elements.
The only solution in current code that I found is:

  1. for directive - to use template instead of templateUrl
  2. for ng-include - to load only buttons from separate file, but <form> tag put in html.

Please have a look on updated plunker http://plnkr.co/edit/ljHaiCdPa4hm6vigBfGY?p=preview
and share your thoughts.
thx!

On this example you have ng-include but the template still using an ng-repeat outside from the ng-include. Because I need a recursive template I use ng-include, so the ng-repeat needs to go inside as well, not only the buttons:
Following this my example doesn't work:

<script type="text/ng-template" id="categoryTree">
          <a class="category" data-scrollto data-target="#{{ category.name | slugify }}"
          editable-text="category.name" e-name="name" e-form="name" e-required onbeforesave="changedCategoryName($data, category)">
          <span class="fa fa-arrows-alt" ng-show="isEditing"></span>
          {{ category.name }}</a>
          <div class="btn-group pull-right" data-ng-show="isEditing && !name.$visible">
            <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-cog"></i>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li ng-click="name.$show()"><a>Edit category name</a></li>
              <li ng-click="newCategory.$show()"><a>Add child category</a></li>
              <li ng-click="deleteCategory(category.id)"
                ng-if="category.child_categories.length === 0 && category.global_definitions_data.length === 0">
                <a>Remove category</a></li>
            </ul>
          </div>
          <ul ng-if="category.child_categories.length > 0"
            ui-sortable="sortableOptions" ng-model="category.child_categories" class="nav tree-category">
              <li ng-repeat="category in category.child_categories" ng-include="'categoryTree'">           
              </li>
          </ul>
        </script>

        <nav id="global_tree_nav" ng-class="{'editing':isEditing}">
          <ul ui-sortable="sortableOptions" ng-model="global_tree.child_categories" class="nav tree-category">
            <li ng-repeat="category in global_tree.child_categories track by $index" ng-include="'categoryTree'"></li>
          </ul>  
        </nav>

from angular-xeditable.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.