Установить angular-xeditable в Zurb Foundation для приложений?

Я новичок в одностраничных приложениях, Foundation for Apps (F4A) и Angular.js. Это первый раз, когда я пытался добавить модуль Angular в фреймворк, и хотя это кажется легким, что-то не работает. Проблема в том, что угловая часть HTML отображается на визуализированной странице

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

Однако этого не происходит для директив F4A. Они не видны на странице. Я еще не кодировал контроллеры, просто выкладывал HTML. Этот модуль предназначен для встроенного редактирования пользователем страниц, таких как профили, поэтому мне не нужно иметь одну страницу профиля для ввода данных, а другую для отображения.

Помощь в выяснении этого будет высоко ценится! Кроме того, я нигде не мог найти соответствующее руководство в Интернете, и я не могу быть первым человеком, который облажался.

Я следую инструкциям по началу работы здесь.

1) Установка Bower прошла успешно, и модуль теперь находится в / bower-components / xeditable.

2) Я вставил предложенную ссылку css в заголовок index.html.

3) Я вставил предложенный сценарий js в заголовок, но также попытался в верхней части Gulpfile, где я думаю, что это должно быть:

// 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) Этот бит уже находится в index.html Zurb вверху:

<html ng-app="app">

5) Инструкции говорят мне сделать это:

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

Тем не менее, я положил его в верхней части app.js:

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

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

    //angular-xeditable directive
    'xeditable'
 ])

6) Шаг 6 хочет, чтобы этот код был в шаблоне, поэтому я поместил его в шаблон, в котором уже есть Angular {{ }}, который не вызывает проблем:

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

7) Наконец, я скопировал этот контроллер в app.js:

app.controller('Ctrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };  
});
Источник

1 ответ

Я нашел кодировщика на Upwork.com, Наталью Иваняк, которая заставила это работать. Я показал только ключевые части в качестве примера, а не всю форму.

В projects-profile.html частично:

<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>

В controllers.js:

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

Надеюсь, это поможет кому-то!!

Источник
Другие вопросы по тегам