1

我是单页应用程序、Foundation for Apps (F4A) 和 Angular.js 的菜鸟。这是我第一次尝试将 Angular 模块添加到框架中，虽然看起来很简单，但有些东西不起作用。问题是 html 的 Angular 部分显示在呈现的页面上

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

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

帮助解决这个问题将不胜感激！此外，我在网上的任何地方都找不到相关的指导，我也不能成为第一个搞砸的人。

我正在按照此处的入门说明进行操作。

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

1 回答 1

0

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

在 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: ''
};

希望这对某人有帮助！

于 2016-04-20T21:00:49.967 回答