Install angular-xeditable in Zurb Foundation for Apps?

Question

Install angular-xeditable in Zurb Foundation for Apps?

142 Views Asked by Preston At 07 April 2025 at 08:17

I'm a noob to single page applications, Foundation for Apps (F4A), and Angular.js. This is the first time I've tried to add an Angular module to the framework and while it seems easy something isn't working. The problem is the Angular part of the html is displayed on the rendered page

{{ user.name || "empty" }}.

However, that isn't happening for the directives from F4A. They are not visible on the page. I haven't coded the controllers yet, just laying out the html. This module is for user inline editing of pages such as profiles so I don't have to have one profile page for data entry and another for display.

Help figuring this out would be deeply appreciated! Also, I could not find related guidance anywhere on the Web and I can't be the first person to screw this up.

I'm following the Getting Started instructions here.

1) The Bower installation went well and the module now lives in /bower-components/xeditable.

2) I've inserted the suggested css link in the index.html header.

3) I inserted the suggested js script in the header but also tried near the top of the Gulpfile where I think it should be:

// These files include Foundation for Apps and its dependencies
foundationJS: [
  'bower_components/*', //add a bunch more like this.

  //Angular-xeditable module
  'bower_components/angular-xeditable/dist/js/xeditable.js'
],

4) This bit is already in Zurb's index.html at the top:

<html ng-app="app">

5) The instructions tell me to do this:

var app = angular.module("app", ["xeditable"]);

However, I put it at the top of app.js:

(function() {
  'use strict';
  angular.module('pfApp', [
    'ui.router',
    'ngAnimate',

    //foundation
    'foundation',
    'foundation.dynamicRouting',
    'foundation.dynamicRouting.animations',

    //angular-xeditable directive
    'xeditable'
 ])

6) Step 6 wants this code in a template so I put it in a template that already has Angular {{ }} that isn't causing a problem:

<div ng-controller="Ctrl">
  <a href="#" editable-text="user.name">{{ user.name || "empty" }}</a>
</div>

7) Lastly, I copied this controller into app.js:

app.controller('Ctrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };  
});

Original Q&A

There are 1 best solutions below

**Preston** · Answer 1

I found a coder on Upwork.com, Natalya Ivanyak, who got this to work. I've shown only the key parts as an example, not the whole form.

In projects-profile.html partial:

<form editable-form name="addProjectForm" novalidate ng-controller="projectFormCtrl">

<div class="small-12 columns">
    <a href="" ng-click="$form.$show()" e-placeholder="Describe the project in one or two short paragraphs." editable-textarea="project.description" e-name="description" e-rows="40" e-cols="40">
      <pre class="textarea-field">{{project.description || 'Describe the project in one or two short paragraphs.'}}</pre>
    </a>
  </div>

In controllers.js:

angular.module('pfApp').controller('projectFormCtrl', ['$scope', '$filter', function($scope, $filter) {
$scope.project = {
    pitch: '',
    description: '',
    whatEverElseYouWant: ''
};

Hope this helps someone!!

Install angular-xeditable in Zurb Foundation for Apps?

There are 1 best solutions below

Related Questions in ANGULARJS

Related Questions in ANGULARJS-DIRECTIVE

Related Questions in ZURB-FOUNDATION-APPS

Trending Questions

Popular # Hahtags

Popular Questions