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

问题描述：

我是单页应用程序，Foundation for Apps（F4A）和Angular.js的noob。这是我第一次尝试在框架中添加一个Angular模块，虽然看起来很容易，但某些东西不起作用。问题是在呈现页面上显示html的Angular部分在Zurb Foundation for Apps中安装angular-xeditable？

{{ 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步希望这些代码模板，所以我把它放在已经有角{{}}未造成问题的模板：

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

答

我发现Upwork.com编码器，纳塔利娅Ivanyak，谁得到了这个工作。我仅以关键部分为例，而不是整个表格。

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

希望这可以帮助别人！

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

相关推荐