Tag: angularjs

在Angular指令中使用外部模板（templateURL）上的$ compile

我有一个recursion的Angular指令，它使用一个模板variables，并在link函数中进行编译。 问题是，我的模板已经变得非常长，失去控制，我想在外部HTML文件中将其外部化（这也使得它更容易例如自动缩进）。 如何将外部模板加载到可在$compile内部使用的指令中？ 我见过templateURL ，但是这不让我命名该variables并将其传递给$compile函数。 var template = "<p>My template</p>"+ "<this-directive val='pass-value'></this-directive>"; return { scope: { … }, … link: function(scope, element){ element.html(template); $compile(element.contents())(scope); } } 和

AngularJS指令：链接和编译function是否一起工作？

我对这个function有一些疑问。 可以说我有这个指令： .directive('hello', function () { return { template: '<div>Hello <span ng-transclude></span></div>', restrict: 'E', transclude: true, compile: function() { console.log('Compile()'); return { pre: function() { console.log('PreLink()'); }, post: function() { console.log('PostLink()'); } }; }, link: function postLink(scope, element, attrs) { console.log('Link()'); } }; } 我把它添加到我的模板中： <hello>World</hello> 控制台日志： Compile() PreLink() PostLink() 那么为什么link()不被调用？ 如果不是从compile()返回一个对象，我返回一个打印PreLink()控制台日志的函数： Compile() PreLink() 如果我不从Compile()返回任何东西，控制台日志： […]

在ui-routerparsing过程中应用加载微调器

resolve $routeProvider属性允许在相应的视图被呈现之前执行一些工作。 如果我想在执行这些作业时显示一个微调框以增加用户体验，该怎么办？ 事实上，否则用户会感觉到应用程序被阻塞，因为例如几毫秒没有显示视图元素。 当然，还有一种方法可以从当前视图中定义一个全局的div元素来显示，以显示微调，这要感谢$scope.$rootChangeStart函数。 但是我不想用一个可怜的微调来隐藏整个页面。 我想我的web应用程序的一些页面加载显示的方式不同。 我遇到了这个有趣的post，其中包含我上面描述的确切问题： 这种方法导致了糟糕的UI体验。 用户点击一个button来刷新列表或其他东西，整个屏幕被覆盖在一个通用的微调，因为库无法显示一个微调只是实际上受到状态改变影响的视图。 不用了，谢谢。 无论如何，在我提出这个问题之后，我意识到“解决”function是一种反模式。 它等待所有的决心，然后animation状态的变化。 这是完全错误的 – 你希望你的状态之间的过渡动​​画能够平行于你的数据加载，所以后者可以被前者掩盖。 例如，假设你有一个项目列表，点击其中一个隐藏列表，并在不同的视图中显示项目的细节。 如果我们对项目细节的asynchronous加载平均需要400毫秒，那么我们可以在大多数情况下通过在列表视图上有300毫秒的“离开”animation和300毫秒的“input”animation来掩盖负载在项目详细信息视图。 这样我们就可以为UI提供一个柔和的感觉，并且可以避免在大多数情况下显示一个微调。 但是，这要求我们同时启动asynchronous加载和状态更改animation。 如果我们使用“parsing”，那么整个asynchronousanimation在animation开始之前发生。 用户点击，看到一个微调，然后看到过渡animation。 整个状态变化需要〜1000ms，太慢了。 “解决”可能是caching不同视图之间的依赖关系的一种有用的方法，如果它有select不等待承诺的话，但是当前的行为总是在状态改变开始之前解决它们使得它几乎没有用。 应该避免涉及asynchronous加载的任何依赖性。 我真的应该停止使用resolve来加载一些数据，而是直接开始将它们加载到相应的控制器中？ 这样，只要作业执行完毕，我就可以更新相应的视图，而且在视图中我想要的地方，而不是全局。

在Typescript中创build一个AngularJS 1.5组件的最佳实践是什么？

我正在使用Angular 1.5中的.component()语法进行试验。 看起来，最新的方式是在组件中编码控制器，而不是单独的文件，我可以看到，鉴于组件样板是最小的优点。 问题是我一直编写我的控制器作为打字稿类，并希望继续这样做，因为这似乎是符合Angular2。 我最大的努力就是这样的： export let myComponent = { template: ($element, $attrs) => { return [ `<my-html>Bla</my-html>` ].join('') }, controller: MyController }; class MyController { } 它的工作，但它不是优雅的。 有没有更好的办法？

AngularJSexpression式在IE8的style属性中不起作用

在style属性上使用这样的expression式可以在Chrome上运行，但在IE8上不起作用 style="width:{{progress}}%" http://jsfiddle.net/5VDMD/12/ （要testing它，请在文本框中键入一个数字） 任何解决这个问题的解决方法？

点击到处，但在这里事件

想知道我将如何执行“点击任何地方，但在这个元素”事件。 我有一些你可以比较文件浏览器中的文件列表。 您可以select某些元素，但是如果在元素控制器外部单击，则需要取消select所有元素。 添加了一个截图，使其更清晰。 所以我想要做的是，如果我点击任何地方，但在语言元素，它应该触发一个事件。 更新 澄清我不问我怎么可以用jQuery做到这一点。

CoffeeScript – 不允许在Angularexpression式中引用DOM节点

我的主要问题很简单： 在控制器或指令中进行DOM操作时出现错误，但function完美无缺。 Error: [$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: open() 我想忽略这些错误，并从functionangular度（而不是从devise的angular度）得到确认安全的做法， 为了简单起见，我希望能够简单回答这个问题，而不用质疑我需要这样做。 现在，如果有人想要更详细地讨论，我有这个要点： https : //gist.github.com/kosz/04f916a5725d85045be5 （依赖：angular，jquery，jquery ui对话框）与我目前遇到的代码行为。 为了摆脱这个错误，我已经尽了最大的努力，根据我读的文档和文档，angular度上的dom操作似乎在指令中被鼓励。 所以我已经使代码与指令工作，但是，它仍然会抛出错误！ 正如你所看到的，我正在使用JQuery UI，并显示每个列表项目，如果用户想编辑。 我不是直接操纵dom，但是，我需要一种方法来控制jQuery ui Dialog的closures/打开事件，这不会让Angular填充控制台的错误。 任何有关这方面的见解，非常感谢。 请注意，我知道angularui bootstrap模式，这不是我在这个特定的场景中使用的选项。

获取Angular状态推迟？

使用jQuery延迟，我习惯于能够像这样检查当前状态： var defer = $.Deferred(); defer.state(); //Returns the state of the deferred, eg 'resolved' 有没有办法做同样的Angular延期？ （甚至更好的承诺）

ui.bootstrap.datepicker is-open无法在模态中工作

我使用Bootstrap UI的datepicker指令，我试图有一个datepickerbutton，像在原来的例子中打开datepickerpopup，但它不能在模式窗口中工作。 参见PLUNKER 我究竟做错了什么？

资源的angular度斜线

我的api需要api调用的尾部斜线。 我想知道如何用angular度来解决这个问题。 所以我需要能够访问/tasks/或一个/tasks/xxxx/. 我试图通过： angular.module('taskServices', ['ngResource']). factory('Tasks', function($resource){ return $resource('/tasks/:task_id/', {}, { query: {method:'GET', params:{}, isArray:true} }); }); 和a $scope.tasks = Tasks.query(); 但它会导致/tasks或tasks/xxx查询。 我如何强制它总是/tasks/和/tasks/xxx/