Question

我是单页应用程序，应用程序基础（F4A）和Angular.js的菜鸟。这是我第一次尝试将Angular模块添加到框架中，虽然看起来很容易，但某些东西不起作用。问题是html的Angular部分显示在呈现的页面上

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

但是，F4A的指令没有发生这种情况。它们在页面上不可见。我还没有编码控制器，只是布局html。此模块用于用户内联编辑配置文件等页面，因此我不必拥有一个用于数据输入的配置文件页面和另一个用于显示的配置文件页面。

帮助搞清楚这一点将深表感谢！此外，我无法在网络上的任何地方找到相关指导，我也不能成为第一个搞砸了这个指南的人。

我正在按照入门说明here进行操作。

1）Bower安装进展顺利，模块现在位于/ bower-components / xeditable中。

2）我在index.html标题中插入了建议的css链接。

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）这个位已经在Zurb的index.html顶部：

<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'
  };  
});

Answer 1

我在Upwork.com找到了一个编码器，Natalya Ivanyak，他让这个工作。我只展示了关键部分作为例子，而不是整个表格。

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

在controllers.js中：

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

希望这有助于某人!!

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

1 个答案: