在Zurb Foundation for Apps中安装角度可编辑

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

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

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

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

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

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

2）我在索引.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的索引中.html在顶部：

<html ng-app="app">

5）说明告诉我这样做：

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

但是，我将其放在应用程序.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）最后，我将这个控制器复制到应用程序中.js：

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

我在 Upwork.com 上找到了一位程序员，Natalya Ivanyak，她让这个工作。我只展示了关键部分作为示例，而不是整个表单。

在项目配置文件中.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>

在控制器中.js：

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

希望这对某人有所帮助！！

相关内容

最新更新

热门标签：