angularjs 相关问题

使用 linq.js 从对象数组中删除元素

我不久前开始使用linq.js，发现它非常有用，但有一个问题我确实无法解决。我正在使用 Angular，并且有一个具有以下结构的简单 JSON 数组...

在 ng-repeat 中绑定字符串数组的两种方式

我有一个字符串数组，我希望每个字符串都绑定到一个输入。 然而，编辑输入似乎并没有更新数组（也许是孤立的范围问题？）。 建议？

将信息从 Razor 客户端 (cshtml) 传递到 AngularJS

我有以下剃须刀文件： @{ ViewBag.Title = "废话"; 布局=“~/Views/Shared/_Layout.cshtml”； ViewBag.InitModule = "myFooModule"; } @部分脚本{ <p>我有以下剃须刀文件：</p> <pre><code>@{ ViewBag.Title = &#34;Blah&#34;; Layout = &#34;~/Views/Shared/_Layout.cshtml&#34;; ViewBag.InitModule = &#34;myFooModule&#34;; } @section Scripts{ &lt;script src=&#34;~/Scripts/angular-route.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;~/Scripts/angular-route.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;~/js/recipes.js&#34;&gt;&lt;/script&gt; } &lt;div data-ng-view </code></pre> <p>这是我的 angularjs 代码：</p> <pre><code>var testModule = angular.module(&#34;myFooModule&#34;, [&#39;ngRoute&#39;]); appetizerModule.config([&#34;$routeProvider&#34;, function ($routeProvider) { $routeProvider.when(&#34;/&#34;, { controller: &#34;myController&#34;, templateUrl: &#34;/Templates/test.html&#34; }); $routeProvider.otherwise({ redirectTo: &#34;/&#34; }); }]); </code></pre> <p>我想将带有“myuserinfofromPage”这样的数据的变量从我的razor页面传递到我的angularJs，以便我可以使用该数据（“myuserinfofromPage”）来执行某些操作集。由于我是 AngularJS 的新手，我正在努力寻找一种干净的方式来传递数据。将简单数据从 Razor(cshtml) 传递到我的 Angular 代码的最佳方法是什么？</p> </question> <answer tick="false" vote="11"> <p>您可以将以下内容嵌入到您的剃刀页面中：</p> <pre><code> &lt;script&gt; app.value(&#39;myValue&#39;, @Html.Raw(Json.Encode(Model))) &lt;script&gt; </code></pre> <p>其中 Model 是您要渲染的 .NET 对象。</p> <p>然后将其注入到您的控制器中：</p> <pre><code> app.controller(&#39;ctrl&#39;, function($scope, myValue) { //use myValue }); </code></pre> </answer> <answer tick="false" vote="1"> <p>您可以将 json 格式的数据传递给您的视图，并在使用工厂引导数据后即：</p> <pre><code>testModule.factory(&#39;UserService&#39;, function () { var _userInfo= @Html.Raw(ViewBag.UserDataInJsonFormat); //&lt;- your data is going here return { userInfo : _userInfo } } </code></pre> </answer> <answer tick="false" vote="0"> <p>感谢 Pixelbits 和 sylwester 的回复。我使用角度指令来传递元素数据并将其存储在角度控制器中的 $scope 变量中。参考：<a href="http://fdietz.github.io/recipes-with-angular-js/directives/passing-configuration-params-using-html-attributes.html" rel="nofollow">http://fdietz.github.io/recipes-with-angular-js/directives/passing-configuration-params-using-html-attributes.html</a></p> <pre><code>&lt;body ng-app=&#34;MyApp&#34;&gt; &lt;div my-widget=&#34;Hello World&#34;&gt;&lt;/div&gt; &lt;/body&gt; var app = angular.module(&#34;MyApp&#34;, []); app.directive(&#34;myWidget&#34;, function() { var linkFunction = function(scope, element, attributes) { scope.text = attributes[&#34;myWidget&#34;]; }; return { restrict: &#34;A&#34;, template: &#34;&lt;p&gt;&lt;/p&gt;&#34;, link: linkFunction }; }); </code></pre> </answer> </body></html>

迁移 Angular 1 应用程序以使用模块加载器时出现加载顺序问题

我必须更改我们的一个 Angular 1 应用程序以使用模块加载器（SystemJs），但我遇到了加载顺序问题，我不确定如何正确解决它。 这就是我加载的方式...

显示页面中正在使用哪些指令

有没有办法显示页面中正在使用哪些指令？ 请看一下这个例子 有些事情... 有没有办法显示页面中正在使用哪些指令？ 请看一下这个例子 <div> some things ... <mydirective></mydirective> <mydirective1></mydirective1> <mydirective2></mydirective2> some things ... </div> 这是“mydirective”html <div> <mychilddirective></mychilddirective> <mychilddirective1></mychilddirective1> <mychilddirective2></mychilddirective2> </div> 问题 1：那么，我的观点是，如何在此页面中显示使用的指令列表（例如在控制台日志或其他地方）？ 这个问题的答案应该是 mydirective, mychilddirective, mychilddirective1, mychilddirective2, mydirective1, mydirective2 问题2：如果问题1有答案，有没有办法使用浏览器控制台“发现”使用的指令？或者我的指令是否需要遵循某种模式？ （比如某些属性或类似的东西......） 每个指令都有链接功能。按顺序调用。您可以使用它们来识别正在使用哪个指令。 以下是有关链接函数及其调用顺序的更多详细信息的链接。 https://www.undefinednull.com/2014/07/07/practical-guide-to-prelink-postlink-and-controller-methods-of-angular-directives/

fabric.textbox 不适用于 google chrome？

我正在删除文本框中的所有文本，或者我正在使用退格键删除每个字母。再次删除所有字母后，我正在打字，但它被阻止了。不允许移动。

一个表单提交发出两个 POST 请求

我一直通过 $http 服务从我的表单发布简单数据（无文件）。 这些 post 请求包含 JSON，并由我的 Express 服务器处理。 现在我想将图像上传添加到我的表单中。 这个

PHP 数组：具有多个 orderdetailID 的 orderID

从数据库接收数据后，我将这些数据逐行放入数组中，以便稍后可以使用所有所需数据访问该数组。但我目前正在使用以下数组： JSON 示例 [{“订单...

为 Web 开发人员自动部署、刷新（清除缓存）和重新加载代码

我正在寻找与“ionicserve”一致的东西，它可以检测我对源代码（源文件夹/WebContent）所做的任何更改，并且： 自动部署 自动刷新我的眉毛...

AngularJS 带有换行符的字符串，显示时不带中断

在数据库中，我保存来自文本区域的输入，您可以在其中添加中断。但如何在 Angular 视图中显示它们呢？对于 PHP，这是 nl2br()。 就像 {{ item.foobar }} 一样，带有 bre...

移除 ng-bind-html-unsafe 后，如何注入 HTML？

我正在尝试使用 $sanitize 提供程序和 ng-bind-htm-unsafe 指令来允许我的控制器将 HTML 注入 DIV 中。 但是，我无法让它工作。 我正在尝试使用 $sanitize 提供程序和 ng-bind-htm-unsafe 指令来允许我的控制器将 HTML 注入到 DIV 中。 但是，我无法让它工作。 <div ng-bind-html-unsafe="{{preview_data.preview.embed.html}}"></div> 我发现这是因为它被从 AngularJS 中删除了（谢谢）。 但是如果没有ng-bind-html-unsafe，我会收到此错误： http://errors.angularjs.org/undefined/$sce/unsafe 您可以将其转换为简单的过滤器，而不是按照 Alex 的建议在作用域中声明函数： angular.module('myApp') .filter('to_trusted', ['$sce', function($sce){ return function(text) { return $sce.trustAsHtml(text); }; }]); 然后你可以像这样使用它： <div ng-bind-html="preview_data.preview.embed.html | to_trusted"></div> 这是一个工作示例：http://jsfiddle.net/leeroy/6j4Lg/1/ 您表示您正在使用 Angular 1.2.0...正如其他评论之一所示，ng-bind-html-unsafe 已被弃用。 相反，你会想做这样的事情： <div ng-bind-html="preview_data.preview.embed.htmlSafe"></div> 在您的控制器中，注入 $sce 服务，并将 HTML 标记为“受信任”： myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) { // ... $scope.preview_data.preview.embed.htmlSafe = $sce.trustAsHtml(preview_data.preview.embed.html); } 请注意，您需要使用 1.2.0-rc3 或更高版本。 （他们修复了 rc3 中的一个错误，该错误导致“观察者”无法在受信任的 HTML 上正常工作。） 您需要确保 sanitize.js 已加载。例如，从 https://ajax.googleapis.com/ajax/libs/angularjs/[LAST_VERSION]/angular-sanitize.min.js 加载它 您需要在您的 ngSanitize 上包含 app 模块 例如：var app = angular.module('myApp', ['ngSanitize']); 您只需与ng-bind-html原来的html内容进行绑定即可。无需在控制器中执行任何其他操作。解析和转换由 ngBindHtml 指令自动完成。 （阅读有关此内容的 How does it work 部分：$sce）。所以，在你的情况下，<div ng-bind-html="preview_data.preview.embed.html"></div>可以完成这项工作。 对我来说，最简单、最灵活的解决方案是： <div ng-bind-html="to_trusted(preview_data.preview.embed.html)"></div> 并向您的控制器添加功能： $scope.to_trusted = function(html_code) { return $sce.trustAsHtml(html_code); } 不要忘记将 $sce 添加到控制器的初始化中。 我认为最好的解决方案是： 创建一个自定义过滤器，例如可以在 common.module.js 文件中 - 在您的应用程序中使用： var app = angular.module('common.module', []); // html filter (render text as html) app.filter('html', ['$sce', function ($sce) { return function (text) { return $sce.trustAsHtml(text); }; }]) 用途： <span ng-bind-html="yourDataValue | html"></span> 现在 - 我不明白为什么指令 ng-bind-html 不将 trustAsHtml 作为其功能的一部分 - 对我来说这似乎有点愚蠢，因为它不 无论如何 - 这就是我的做法 - 67% 的时间，它每次都有效。 您可以创建自己的简单不安全的 html 绑定，当然，如果您使用用户输入，则可能存在安全风险。 App.directive('simpleHtml', function() { return function(scope, element, attr) { scope.$watch(attr.simpleHtml, function (value) { element.html(scope.$eval(attr.simpleHtml)); }) }; }) 您不需要在 ng-bind-html-unsafe 中使用 {{ }} ： <div ng-bind-html-unsafe="preview_data.preview.embed.html"></div> 这是一个示例：http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview {{ }} 运算符本质上只是 ng-bind 的简写，所以您所尝试的相当于绑定内的绑定，这是行不通的。 我也遇到过类似的问题。仍然无法从 github 上托管的 Markdown 文件中获取内容。 在 app.js 中为 $sceDelegateProvider 设置白名单（添加了 github 域）后，它的工作就像一个魅力。 描述：如果您从不同的网址加载内容，则使用白名单而不是包装为可信。 文档： $sceDelegateProvider 和 ngInclude（用于获取、编译和包含外部 HTML 片段） 严格上下文转义可以完全禁用，允许您使用 ng-html-bind 注入 html。 这是一个不安全的选项，但在测试时很有用。 来自 $sce 的 AngularJS 文档的示例： angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) { // Completely disable SCE. For demonstration purposes only! // Do not use in new projects. $sceProvider.enabled(false); }); 将上述配置部分附加到您的应用程序将允许您将 html 注入 ng-html-bind，但正如文档所述： SCE 以很少的编码开销为您提供许多安全优势。 申请禁用 SCE 的申请会困难得多，或者 您可以自行保护它或在稍后阶段启用 SCE。它可能会让 对于有大量现有代码的情况，禁用 SCE 是有意义的 这是在引入 SCE 之前编写的，您要将它们迁移到 一次模块。 你可以像这样使用过滤器 angular.module('app').filter('trustAs', ['$sce', function($sce) { return function (input, type) { if (typeof input === "string") { return $sce.trustAs(type || 'html', input); } console.log("trustAs filter. Error. input isn't a string"); return ""; }; } ]); 用法 <div ng-bind-html="myData | trustAs"></div> 它可用于其他资源类型，例如 iframe 的源链接和声明的其他类型 here

如何使用 Javascript 向 Instagram API 进行 POST

我可以仅使用 JavaScript 调用 Instagram API 来发表评论或点赞照片吗？我使用带有 grunt 的 Angular 框架，并且不想涉及任何后端。到目前为止我想通了...

如何在 Angular 应用程序中安全地对图像应用模糊效果以防止用户操纵？

我正在开发一个 Angular 应用程序，其中显示的图像包含敏感信息，并且我想对这些图像应用模糊效果。但是，我不希望用户能够检查...

AngularJS：ng-init 的范围

Angular 中 ng-init 的范围是什么？ 这是一个简单的例子来说明我的问题： Angular 中 ng-init 的范围是什么？ 这是一个简单的例子来说明我的问题： <div ng-init="model = { year: '2013'}"> <a href="" ng-click="model.year = '2012'">2012</a> | <a href="" ng-click="model.year = '2013'">2013</a> <div>Showing {{ model.year }}</div> <hr /> </div> <div ng-init="model = { year: '2013'}"> <a href="" ng-click="model.year = '2012'">2012</a> | <a href="" ng-click="model.year = '2013'">2013</a> <div>Showing {{ model.year }}</div> </div> 此处提供实时示例：http://plnkr.co/edit/HkioewOzzglvFMKDPdIf?p=preview 似乎 ng-init 范围在 2 个div[ng-init]之间共享。 例如，如果您单击任一部分中的年份“2012”，则会更改这两个部分中的 year 属性。 有没有办法告诉 Angular 为每个 ng-init 创建一个新范围，从而单击“2012”年份只会影响它所属的部分？ ng-init 不会创建新的作用域，它会计算当前作用域中的表达式。在您的示例中，您的两个ng-init都在相同的范围内，更改相同的模型属性将影响另一个模型属性。如果您需要单独的范围，您可以尝试ng-controller。 <div ng-controller="MainCtrl" ng-init="model = { year: '2013'}"> <a href="" ng-click="model.year = '2012'">2012</a> | <a href="" ng-click="model.year = '2013'">2013</a> <div>Showing {{ model.year }}</div> <hr /> </div> <div ng-controller="MainCtrl" ng-init="model = { year: '2013'}"> <a href="" ng-click="model.year = '2012'">2012</a> | <a href="" ng-click="model.year = '2013'">2013</a> <div>Showing {{ model.year }}</div> </div> 演示 旁注： 在这种情况下，您不需要 ngInit，只需直接在控制器中初始化该值即可。 ngInit 唯一合适的用途是为特殊属性设置别名 ngRepeat.除了这种情况，您应该使用控制器而不是 ngInit 初始化范围内的值。 https://docs.angularjs.org/api/ng/directive/ngInit 由于 ng-if 创建了一个新范围，您可以通过以下方式完成它： <div ng-if="true" ng-init="model = { year: '2013'}"> 您好，为了澄清并找到解决方案，您可以尝试下面给出的解决方案吗 <script> var app = angular.module('myAngularApp', []); app.controller('myCtrl1', function ($scope) { }); app.controller('myCtrl2', function ($scope) { }); </script> <body ng-app="myAngularApp"> <div ng-controller="myCtrl1" ng-init="model = { year: '2012'}"> <a href="" ng-click="model.year = '2012'">2012</a> | <a href="" ng-click="model.year = '2013'">2013</a> <div>Showing {{ model.year }}</div> </div> <hr /> <div ng-controller="myCtrl2" ng-init="model = { year: '2013'}"> <a href="" ng-click="model.year = '2012'">2012</a> | <a href="" ng-click="model.year = '2013'">2013</a> <div>Showing {{ model.year }}</div> </div> </body>

AngularJS：如何将默认值设置为 ng-model="searchText"？

我无法将默认值设置为 ng-model="searchText"。这是我正在使用的代码 谁能帮我解决这个问题吗？

获取 Highcharts 工具提示以使用 templateteUrl 返回角度指令？

我有类似的问题 获取 Highcharts 工具提示以返回角度指令？。 但我尝试使用定义了 templateUrl 的指令创建一些复杂的工具提示，而不是使用内联

资源的斜尾斜杠

我的 api 需要在 api 调用时添加尾部斜杠。 我想知道如何用角度来实现这一点。 所以我需要能够访问/tasks/或/tasks/xxxx/。 我尝试通过以下方式做到这一点： 角度.mo...

如何使用Angularjs在内循环中生成序号列表

我有 2 个 ng-repeat 嵌套在另一个中。 x.姓名 {{快递怎么写... 我有 2 个 ng-repeat 嵌套在另一个中。 <div ng-repeat='x in categories'> <span>x.name</span> <div ng-repeat='y in items'> <p>{{ how to write the expression here ?}}</p> </div> </div> 所以我想让它看起来像： Food 1 2 3 Water 4 5 Vegy 6 7 etc... 我怎样才能弄清楚？ 无论项目属于什么，您都可以仅使用 CSS 来实现此目的： CSS： body { counter-reset: items; } .item:before { counter-increment: items; content: counter(items) ".\00A0\00A0"; } HTML： <div ng-repeat='x in categories'> <div ng-repeat='y in items'> <p class="item"></p> </div> </div> 编辑：Plunker。

尝试使用 Angular.js 显示验证消息时出现错误

我在尝试使用 Angular.js 显示验证消息时收到以下错误。 错误： angularjs.js:107 错误: [$parse:syntax] http://errors.angularjs.org/1.4.6/$parse/syntax?p0=...

锚点单击调用 2 个方法

我们正在使用 AngularJS 为我们的应用程序执行类似/不同的行为。 HTML 代码： 我们正在使用 AngularJS 为我们的应用程序执行 like/unlike 行为。 HTML 代码： <html> <body ng-app="myApp"> <div ng-controller="newsCntrl" > <form ng-submit="post()" name="postForm" id="postForm" > <input type="submit" id="submit" value="Submit"/> </form> <a href="#" ng-click="likePost(post.id);">Like</a></span> </div> </body> </html> 控制器代码： myApp.controller("newsFeedCtrl", function ($scope, $http) { console.log("inside newsFeedCtrl"); $scope.post() = function() { console.log("posting"); } $scope.likePost = function(postId) { console.log("liking post"); } }); 问题是，当我们点击 like 时，它也会调用 post() 函数，这是不应该发生的。 我们在这里遗漏了什么吗？ HTML 中的控制器名称不匹配： <div ng-controller="newsCntrl" > 以及JS中的控制器： myApp.controller("newsFeedCtrl", function ($scope, $http) 如果我修复它，它似乎有效。 检查这个小提琴 您应该删除语法错误 html 代码： <html> <body ng-app="myApp"> <div ng-controller="newsCntrl"> <form ng-submit="submitPost()" name="postForm" id="postForm"> <input type="submit" id="submit" value="Submit"/> </form> <a href="#" ng-click="likePost(post.id);">Like</a> </div> </body> </html> 控制器代码： myApp.controller("newsFeedCtrl", function ($scope, $http) { console.log("inside newsFeedCtrl"); $scope.submitPost = function() { console.log("posting"); } $scope.likePost = function(postId) { console.log("liking post"); } });