在Zurb Foundation for Apps中安装angular-xeditable吗？

Question

I'm a noob to single page applications, Foundation for Apps (F4A), and Angular.js. 我对单页面应用程序，Foundation for Apps（F4A）和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. 这是我第一次尝试向框架中添加Angular模块，虽然看起来很简单，但是有些问题不起作用。 The problem is the Angular part of the html is displayed on the rendered page 问题是html的Angular部分显示在呈现的页面上

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

However, that isn't happening for the directives from F4A. 但是，对于F4A的指令并没有发生这种情况。 They are not visible on the page. 它们在页面上不可见。 I haven't coded the controllers yet, just laying out the html. 我还没有编码控制器，只是布置了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. 另外，我在Web上的任何地方都找不到相关的指南，也无法成为第一个搞砸的人。

I'm following the Getting Started instructions here . 我正在按照此处的入门说明进行操作。

1) The Bower installation went well and the module now lives in /bower-components/xeditable. 1）Bower安装进展顺利，该模块现在位于/ bower-components / xeditable中。

2) I've inserted the suggested css link in the index.html header. 2）我已经在index.html标头中插入了建议的CSS链接。

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: 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) This bit is already in Zurb's index.html at the top: 4）这一点已经在Zurb的index.html顶部了：

<html ng-app="app">

5) The instructions tell me to do this: 5）说明告诉我要这样做：

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

However, I put it at the top of app.js: 但是，我将其放在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: 6）步骤6希望将此代码放在模板中，因此我将其放在已经具有Angular {{}}且不会引起问题的模板中：

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

7) Lastly, I copied this controller into app.js: 7）最后，我将此控制器复制到app.js中：

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

Answer 1

I found a coder on Upwork.com, Natalya Ivanyak, who got this to work. 我在Upwork.com上找到了一个编码器，Natalya Ivanyak，这个编码器可以正常工作。 I've shown only the key parts as an example, not the whole form. 我仅以关键部分为例，而不是整个表单。

In projects-profile.html partial: 在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>

In controllers.js: 在controllers.js中：

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

Hope this helps someone!! 希望这对某人有帮助！！

在Zurb Foundation for Apps中安装angular-xeditable吗？

问题描述

1 个解决方案

解决方案1
0 2016-04-20 21:00:49

在Zurb Foundation for Apps中安装angular-xeditable吗？

问题描述

1 个解决方案

解决方案1 0 2016-04-20 21:00:49

解决方案1
0 2016-04-20 21:00:49