小编fxc*_*xck的帖子

想象一下,我的数据库中有很多条目(比如用户).我还有两个路由,一个用于列表,另一个用于详细信息(您可以在其中编辑条目).现在我正在努力解决如何处理数据结构问题.

我正在考虑两种方法和两者的有点组合.

共享数据集

• 我导航到/list,我的所有用户都是从存储在redux存储中的api下载的,在键下users,我还添加了一些 users_offset并且users_limit只渲染部分列表
• 然后我浏览到/detail/<id>,并存储currently_selected_user与<id>作为VAL ...这意味着我将能够与这样的事情让我的用户的数据users.find(res => res.id === currently_selected_user)
• 更新也很简单,因为我只使用一个数据集和指向它的细节
• 添加新用户也很简单,再次使用相同的用户列表

现在我用这种方法遇到的问题是,当用户列表变得庞大(比如数百万)时,下载可能需要一段时间.而且,当我直接导航时/detail/<id>,我还没有下载所有用户,所以为了获得我需要的数据,我将不得不先下载整个内容.数百万用户只需编辑一个.

分离的数据集

• 我导航到/list,而不是从api下载我的所有用户,我只下载了几个,取决于我users_per_page和users_current_page将要设置的,我可能会将数据存储为users_currently_visible
• 然后我浏览到/detail/<id>,存储currently_selected_user与<id>作为VAL ...和,而不是搜索通过users_currently_visible我只是从API下载用户的数据..
• 在更新时,我不会users_currently_visible以任何方式更新
• 我也不会补充

我认为这里可能存在的问题是,在访问时我将不得不/list再次从api下载数据,因为它可能与数据库中的内容不同步,我也可能不必要地详细下载用户数据,因为他们可能偶然已经在我的内心users_currently_visible

某种frankenstein-y shenanigans

• 我详细说明,我和分离数据集一样,但不是直接从api下载用户数据,我首先检查:
  • 我有没有？ users_currently_visible
  • 如果是这样,是否有一个用户在我们之间有我的身份？如果两者都是真的,那么我将其用作我的用户数据,否则我进行api调用
• 同样在更新时发生,我检查我的用户是否存在,users_currently_visible如果是,我也更新该列表,如果不是我什么都不做

这可能会奏效,但并不觉得这是正确的方法.我可能还需要下载users_currently_visible访问时的新清单/list,因为我可能添加了一个新的...

有没有粉丝喜欢的方式这样做？...我敢肯定每一个redux用户都必须遇到同样的事情.

谢谢!

所以我有这个名为say的指令mySave,它就是这个

app.directive('mySave', function($http) {
   return function(scope, element, attrs) {
      element.bind("click", function() {
          $http.post('/save', scope.data).success(returnedData) {
              // callback defined on my utils service here

              // user defined callback here, from my-save-callback perhaps?
          }
      });
   }
});

元素本身看起来像这样

<button my-save my-save-callback="callbackFunctionInController()">save</button>

callbackFunctionInController现在只是

$scope.callbackFunctionInController = function() {
    alert("callback");
}

当我console.log() attrs.mySaveCallback在my-save指令里面时,它只是给了我一个字符串callbackFunctionInController(),我在某个地方读到我应该解析它并且它会没问题,所以我试着给$parse(attrs.mySaveCallback)了我一些函数,但几乎没有我想要的那个,它让我回来了

function (a,b){return m(a,b)} 

我究竟做错了什么？这种方法从一开始就有缺陷吗？

有没有办法检查元素是否正在动画？

但不是使用jquery的动画制作动画,而是使用css3的过渡..

我遇到的问题是......我有这个滑块,点击箭头我给它

left = left+200

左边是哪里

element.position().left

要么

parseInt(element.css("left"));

(这没关系,问题也出现了)

该元素正在动画

transition: left 400ms ease-in-out;

所以,当用户点击箭头一次然后在动画结束前再次点击时,左边会根据其位置返回值(因此,而不是说... 400px,它可能会返回235.47px,因为它在动画中间被点击) ..

基本上我想要这个http://plnkr.co/edit/3yfXbo1c0llO40HZ8WNP?p=preview但是当我改变东西时手表不会触发..

我知道这会奏效

$scope.$watch('stuff', function (newVal, oldVal) {
    console.log(oldVal, newVal);

}, true);

但是因为我想在手表内做一些总结而我不想不必要地循环或重新加总没有改变的值.

//编辑 - 请注意,plnkr示例只是从实际应用程序中提取,您可以在其中添加和删除行等等,例如从ng-repeat之外的另一个输入修改总数(某些事物和某些事物的总和). .

你可以用角度做这样的事吗？

这样做是不可能的,因为不解析标签或其他东西

{{ 10000 | currency:"<span>$</span>" }}

http://plnkr.co/edit/WluYoe2Ltmhmhvr8BBWX?p=preview

更别说单独的十进制数了..

理想的结果是

1 000 000<span class="dec">,00</span><span class="cur">€</span>

它不是真的可以用任何过滤器设置吗？？

我可以尝试修改角度的货币过滤器和formatNumber函数,但它仍然会将其作为文本而不是span元素.

//编辑你实际上可以这样做http://plnkr.co/edit/dcEhHi8sp43564ZvC4D1?p=preview

<p ng-bind-html-unsafe="10000 | currency:'<span>$</span>'"></p>

但仍然对小数无能为力

<input type="text" placeholder="test" />
<input type="number" placeholder="test" />

我该如何设计呢？

:-moz-placeholder {
  color: red;
  opacity: 1;
}

::-moz-placeholder {
  color: red;
  opacity: 1;
}

为什么全球占位符不会在其上工作,即使firebug显示它已应用？这是一个错误,是故意吗？

http://jsbin.com/papad/1/edit?html,css,output

问题是,我使用的是ui-router,我有两个视图,一个是工具栏,第二个是表单内容.

现在我想在工具栏中有一个保存按钮,如果没有形式,将禁用该按钮$valid.但这两个是完全不同的范围,它就像:

• rootScope
  • 工具栏范围
  • 内容范围(带form.$valid)

所以我认为我会通过听取表单发出的某些$ valid事件来处理它.

根据Vojta 在这里说的那些事件应该存在,但我找不到它们在任何地方指定..并且看着这个我看不到任何事件..

我可能会这样做

$scope.$watch('form.$valid', function(newVal, oldVal) {
   $scope.$emit('validityChange', {'form':newVal});
});

但感觉就像使用事件而不是这样会更好

或者我应该尝试完全不同的东西？请注意,我不能将工具栏的ui-view放在内容的ui-view中......并且根据这一点,两个ui-views根本不能具有相同的范围.

我正在尝试为角度cli创建自定义原理图.到目前为止,我已经想通了"集合"必须编译,cli无法读取打字稿.这意味着您不能只是克隆https://github.com/angular/devkit/tree/master/packages/schematics/angular更改您需要的内容并将其发布到npm,这意味着您需要克隆整个https:// github.com/angular/devkit并使用它npm run build来创建您需要通过tsc运行它的编译原理图,然后您可以将这些编译的文件发布到npm并使用npm进行全局安装,例如

npm i -g @thescrollbar/schematics

然后我应该能够做到,ng new --collection=@thescrollbar/schematics my-app但令人惊讶的是,它没有用,并且正在投掷tree.branch is not a function.

但是如果将这个全局安装的包复制到cli的模块中

/usr/local/bin/node_modules/@thescrollbar/schematics - > /usr/local/bin/node_modules/@angular/cli/node_modules/@thescrollbar/schematics

它开始工作,你可以创建一个基于你的原理图的新应用程序..

现在,对于新问题,当我尝试使用生成新组件时,我没有解决方法

ng g c --collection=@thescrollbar/schematics logo

它使用@schematics/angular模板创建它,而不是我的集合,尽管事实上,当我故意这样做

ng g shat --collection=@thescrollbar/schematics logo

它说

在集合"@ thescrollbar/schematics"中找不到原理图"shat".

我认为这清楚地表明它确实在使用我的收藏品？

有人设法让自定义集合工作吗？全球和生成组件/模块？

我正在尝试使用angularjs找到内联编辑的最佳方法.就我而言,它是一种带有"编辑"按钮的数据网格.所以它在ng-repeat里面.

我所见过的人在同一行中同时拥有实际数据和编辑输入,编辑输入被隐藏并在点击编辑按钮时显示.

但这似乎不对.在我看来,这是一个无用的DOM.

所以我觉得做这样的事情会更好.你点击编辑按钮,这将有一个指令,这将1)隐藏<td>数据2)找到按钮的父亲,应该是<tr>,并注入模板3)保存删除那些编辑<td>和<td>再次显示数据.

所以我开始制作指令,在我有element.click()功能的内部

// found the parent
var parent = element.closest('tr');
// found all the data tds
var tds = parent.find('td');
// hidden them  
tds.hide();

现在这是问题,接下来我想做这样的事情

// append input with editing tds into parent
parent.append('<td><input type="text" ng-model="entry.name" /> {{entry.name}} </td>');

但是它会不会绑定甚至解析{{}}它会不会？我必须使用什么方法而不是jquery的追加？

关于指令的文件说明了这一点

template element - 声明指令的元素.仅对元素和子元素进行模板转换是安全的.

所以我不能在element.parent()上使用模板转换

如果我做了指令就行了<tr>,即使我做了,我会改变我的整体<tr>,这意味着我失去了原来的模板,我必须有另一个指令或某些东西,将它转换回原始状态..不是吗？

编辑

因为这个问题看起来很流行..首先,我最初担心每次ng重复迭代渲染额外的元素是没有根据的,因为1)你可以使用ng-if,这意味着在条件成立之前它根本不会被渲染2)你可以像我想的那样附加一个模板,然后只是使用$compile它会很好地工作,它绝对不会"昂贵",因为你只是为了一个元素.有许多方法可以解决这个问题,但是ng-if是最简单的,如果supermasher的方式不适合你,那就是.

试图做的angular.element(stringWithHtmlStructure);原因

Error: Syntax error, unrecognized expression: <div id="foo">bar</div>

在jquery 1.9.1中,它适用于jquery 1.8.3

这是一个问题还是一个功能？安全一个或许？我该如何处理？

1.8.3示例http://plnkr.co/edit/ZYYKIixcYzOL46hq0puS?p=preview 1.9.1示例http://plnkr.co/edit/ETmQMY8KoCP0gaKdSrMD?p=preview

对于任何有角度的东西来说绝对不是问题,做$(stringWithHtmlStructure)同样的失败就像你在这里看到的那样http://plnkr.co/edit/FqvOKZ62t0IJ57cT05ew?p=preview