标签: angular-meteor

我正在尝试使用Meteor和Angularjs.我正在使用Meteor_angularjs包,它可以正常使用Collections.

现在我正在尝试使用Session和我的反应数据存储:

TestCtrl = [
    "$scope",
    function($scope){
        $scope.value = Session.get('someValue');
    }
]

这不起作用.

问题:关于如何绑定Meteor Session和Angular的任何建议？

据我所知,我可以编写指令,即将进行轮询Session,但我不认为这是一个不错的选择.
谢谢

更新:

我尝试过以下方法:

TestCtrl = [
    "$scope",
    function($scope){
        Meteor.autorun(function(){
            $scope.config = Session.get('testsConfig');
            if (!$scope.$$phase){
                $scope.$digest();
            }
        });
    }
]

它有点工作,但是我收到以下错误:

Error: INVALID_STATE_ERR: DOM Exception 11
Error: An attempt was made to use an object that is not, or is no longer, usable.
    at derez (http://localhost:3000/test:95:41)
    at derez (http://localhost:3000/test:95:30)
    at derez (http://localhost:3000/test:95:30)
    at derez (http://localhost:3000/test:95:30) …

我有一个Angular-Meteor应用程序正在运行.我想将Angular模板和关联的控制器打包到Meteor包中,并通过添加该包将这些模板注入我的主应用程序.

什么是最好的方法？

更新2015-08-26 - 我想出了如何添加模板,如下所示.但是如何让Meteor包将模板的Angular控制器注入基础应用程序？

关键的搭配是Angular UI-router.

我有一个基本应用程序,其中包含名为packageprefix:packagename的包.在这个包中,我的代码位于包文件夹的根目录中:myPackagedPage.ng.html - Angular HTML模板myPackagedPage.js - 关联的Angular控制器

从我的主应用程序,我尝试创建一个到我的Angular模板的路由,如下所示:

angular.module('parentModule',[
    'angular-meteor',
    'ui.router',
    'angularify.semantic.sidebar'
])

.config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
function($urlRouterProvider, $stateProvider, $locationProvider){
    console.log("app.js config!");
    $locationProvider.html5Mode(true);

    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'client/views/home/home.ng.html',
            controller: 'HomeCtrl'
        })

        .state('myPackagedPage', {
            url: '/myPackagedPage',
            templateUrl: 'packageprefix_packagename/myPackagedPage.ng.html',
            controller: 'MyPackagedPageCtrl'
        })
    ;

    $urlRouterProvider.otherwise('/');

}])

应用程序成功找到myPackagedPage.ng.html文件并呈现它.但是如何添加控制器？

我尝试在我的包中添加它,但控制器函数不会被调用.

console.log("myPackagedPage.js loaded");
angular.module('parentModule')

.controller('MyPackagedPageCtrl', ['$scope',
    function($scope){
        console.log("MyPackagedPageCtrl");
    }])
;

我收到一个错误:

Argument 'MyPackagedPageCtrl' is not a function, got undefined

我正在使用angular2和typescript跟随角度流星教程.

由于我使用的是atom,我添加了atom-typescript包和一个tsconfig文件来利用类型声明文件.

我正在尝试使atom-typescript识别导入client/parties-form/parties_form.ts:

import {Parties} from  'collections/parties';

但原子给我以下错误: Cannot find module 'collections/parties'.

使用相对路径导入模块时,错误消失:

import {Parties} from '../../collections/parties';

但是流星不会编译并给我一个Path reservation conflict错误.

我希望能够使用第一种导入而不使用atom-typescript给我任何错误,从而识别我的类型声明文件.我错过了什么 ？

我的tsconfig.json档案:

{
    "version": "1.5.0",
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "emitDecoratorMetadata": true
    },
    "filesGlob": [
        "./**/*.ts",
        "!./typings/**/*.ts"
    ]
}

可以在此处找到完整版本的教程代码.

HTML:

<div
  ngf-select
  ngf-keep="true"
  ng-model="vm.photos"
  ngf-accept="'image/*'"
  ngf-pattern="'image/*'"
  ngf-multiple="true">
  Select
</div>
<button ng-click="vm.uploadPhotos()">Upload</button>

客户端JS:

vm.uploadPhotos = function() {
  _.forEach(vm.photos, function(photo) {
      PhotoCol.insert(photo);
  });
};

服务器JS:

PhotoCol = new FS.Collection('propertyPhoto', {
  stores: [
    new FS.Store.FileSystem('original')
  ],
  filter: {
    allow: {
      contentTypes: ['image/*']
    }
  }
});

PhotoCol.allow({
  insert: function() {
    return true;
  },
  update: function() {
    return true;
  },
  remove: function() {
    return true;
  },
  download: function() {
    return true;
  }
});

上传开始时,我需要一种方法来取消一个或所有上传过程.并且CollectionFS在上传完成之前在数据库中创建记录,因此如果由于某种原因用户在完成上传过程之前终止了浏览器,那么我将有一个没有上传文件的照片条目.在这里,我需要捕获该错误以从DB中删除条目.有任何想法吗？

我有一些脚本标签,我希望删除条件.在DOM中,我看到它们不存在(它们被注释掉了),但我仍然看到控制台从它们中喷出来.是否加载了脚本标签？如果是这样,有人有任何解决方法吗？

<script ng-if="myCondition" src="blah blah.js"></script>

我是meteor和minimongo的新手,所以我有点迷失了做什么,我已经做了研究,但由于我使用的是角+流星而不是火焰,所以找不到太多.

我的服务器上有一个在我的客户端订阅的集合(有角度).每次将新元素添加到我的服务器集合时,客户端会同步并更新minimongo并且它正常工作.

现在我想设置这个新的"事件",例如当一个新元素被添加到mongo数据的表(html)中的集合中时添加动画/渐变背景颜色(通过ng-repeat对辅助进行迭代)但是真的找不到办法做到这一点.

我已经找到了游标,它可能会成功,但我无法弄清楚我应该如何在我的角度前端实现它.

有人试过已经或可能指出我的研究方向吗？

谢谢

我是角度流星应用程序开发的新手,我很难从客户端对数据库进行更改.我已经成功地完成了大部分角度流星教程,但是现在我正在尝试启动一个新项目并调整教程中的概念,我遇到了问题.

问题. 用户填写表单,当他们单击"添加"时,表单应将数据保存到数据库中.在同一页面上,我列出了一个显示所有数据库条目的列表(典型的"元素中的元素"循环在html列表中).但是,当我在填写表单后单击"添加"时,新条目将暂时添加到列表中,然后消失.当我点击"全部删除"按钮时,会发生同样的行为,一切都会消失片刻然后恢复.持续存在的数据是添加/删除之前数据库中的数据.

尝试进行故障排除.我可以使用"meteor mongo"访问该集合,并且持久存在的值在集合中.我可以从命令行添加到集合或从中删除(编辑:并且更改反映在客户端).在客户端提交的条目不会添加到数据库中.我使用条件启动了具有服务器端启动功能的数据库if (Videos.find().count() === 0).我想也许数据库每次都只是重新初始化,但是当初始化代码被注释掉时,行为仍然存在.添加自动发布项目无法解决问题.编辑:谷歌浏览器在提交之前或之后在控制台中没有任何错误.

相关守则.我正在使用此存储库作为起点.

/client/views/submit/submit.controller.js

angular.module("app").controller("SubmitCtrl", ['$scope', '$meteor',
  function($scope, $meteor){

    $scope.videos = $meteor.collection(Videos).subscribe('videos');

  }
]);

/client/views/submit/submit.ng.html

<form>
  <label>URL</label>
  <input ng-model="newVideo.linkurl">
  <label>Description</label>
  <input ng-model="newVideo.description">   
  <button ng-click="videos.save(newVideo); newVideo='';">Add</button>
</form>

<ul>
  <li ng-repeat="video in videos">
    {{video.linkurl}}
    <p>{{video.description}}</p>
  </li>
</ul>  

/model/collections.js Videos = new Mongo.Collection("videos");

/server/publications/videos.js

Meteor.startup(function () {
  if (Videos.find().count() === 0) {
    var videos = [
      { 'linkurl': 'https://www.youtube.com/watch?v=O7zewtuUM_0',
        'description': '1st video'},
      { 'linkurl': 'https://www.youtube.com/watch?v=KSzuiqVjJg4', …

在angular2-流星教程第三步,我们使用区域法.码:

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { Parties } from '../../both/collections/parties.collection';

...some lines skipped...
  template
})
export class AppComponent {
  parties: Observable<any[]>;

  constructor() {
    this.parties = Parties.find({}).zone();
  }
}

Parties.find({}).zone()到底是做什么用的？

我使用meteor + angular,我想在指令中使用templateUrl来包含nav.ng.html
但是我抛出一个错误

Error: [$compile:tplrt] Template for directive 'checkNav' must have exactly one root element  

index.html的:

 5 <body ng-app='checkApp' ng-controller='CheckCtrl'>
 6   <check-nav></check-nav>
 7 </body>  

directive.js

  1 angular.module 'checkApp'
  2   .directive 'checkNav', () ->
  3   ? restrict: 'E'
  4   ? replace: true
  5   ? templateUrl: 'client/templates/check-views/nav.ng.html'

nav.ng.html

<div>test</div>

我怎么修好它？

通过流星角度教程,在第2步,我创建了角度模板todos-list.ng.html:

<div class="container">
    <header>
        <h1>Todo List</h1>
    </header>

    <ul ng-repeat="task in tasks">
        <li>{{task.text}}</li>
    </ul>
</div>

并得到这个结果

=> Errors prevented startup:

   While building the application:
   todos-list.ng.html:1: bad formatting in HTML template

=> Your application has errors. Waiting for file change.

因为这是复制粘贴,这让我很困惑.我没有看到任何可以解释的问题,其他人有什么想法吗？

更新

这是其他文件.如果有任何帮助,之前的子步骤是有效的.我确信这是愚蠢的,但我肯定不知道是什么,

简单的待办事项,angular.html:

<head>
  <title>Charlie's Todo List with Angular.js</title>
</head>

<body ng-app="simple-todos"
      ng-include="'todos-list.ng.html'"
      ng-controller="TodosListCtrl">
</body>

简单的待办事项,angular.js:

if (Meteor.isClient) {

  // This code only runs on the client
  angular.module('simple-todos',['angular-meteor']);

  angular.module('simple-todos').controller('TodosListCtrl', ['$scope',
    function ($scope) {

      $scope.tasks = [
        { …

我使用alanning:role了流星包,角色工作正常,但问题是我收到了警告"Cannot find name 'Roles".

请帮我解决这个问题.我到处搜索过它.

有些人喜欢导入它 "import { Roles } from 'alanning:roles';"

我也尝试了这个,但仍然有错误...请帮助我,请不要像"问题"那样提交.我过去两天都在搜索这个问题,但是我没有回答,请给我任何帮助,或者请提前解决这个问题.