在AngularJS中，范围是引用应用程序模型的对象。它是表达式的执行上下文。
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>
当父作用域为true或isolated时，无法在子指令中访问父指令的作用域属性
我正在构建一个自定义登录模块指令，其中父标签包含用户名和密码等子标签。我已经在父范围中定义了用户名和密码，并使用控制进行通信...
我有一个可能听起来很愚蠢的场景，但我陷入困境并试图理解可能导致它不起作用的原因。 我有一个角度应用程序，目前包含三个模块 var app = 角度....
我在尝试将数组推入范围并随后清空数组时遇到问题。 我启动函数 ng-click="addInput() 向数组 $scope.info.sites = []; 添加一个新表单，其中包含...
所以，我的网站正在分页，它是通过对 div 进行 .load 来完成的，我没有使用 Angular JS 来加载子页面，我只想在我的子页面中使用 Angular 。 这是我的子页面 ...
我正在使用一些 css html 模板，该模板附带许多 html 组件和许多用于各种事物的数据属性。例如对于滑块它有类似的东西 我正在使用一些 css html 模板，该模板附带许多 html 组件和许多用于各种事物的数据属性。例如对于滑块它有类似 <div class="slider slider-default"> <input type="text" data-slider class="slider-span" value="" data-slider-orientation="vertical" data-slider-min="0" data-slider-max="200" data-slider-value="{{ slider }}" data-slider-selection="after" data-slider-tooltip="hide"> </div> 这里我尝试绑定值 data-slider-value="{{ slider }}" 但是它不起作用。变量“slider”在 $scope 中设置为： $scope.slider = 80; 当我将其绑定为： 时，会立即显示相同的值 80： <h4>I have {{ slider }} cats</h4> 我也尝试过 ng-attr-data-slider-value="{{ slider }}" 没成功。 更新 该指令有这样的内容 function slider() { return { restrict: 'A', link: function (scope, element) { element.slider(); } } }; 其中 element.slider(); 为每个滑块调用 bootstrap-slider.js 中的代码（来自 here）。 我玩了一段时间，为你想出了一些选择。请参阅我的 Plunkr 以了解它们的实际效果。 选项1：滑块变化时无需更新范围值 这适用于您问题中的 HTML。以下是您应该将指令代码更改为的内容。 app.directive('slider', function slider() { return { restrict: 'A', link: function(scope, element, attrs) { attrs.$observe('sliderValue', function(newVal, oldVal) { element.slider('setValue', newVal); }); } } }); 选项 2：两种方式绑定到范围属性 如果您需要在拖动滑块手柄时更新范围属性，则应将指令更改为以下内容： app.directive('sliderBind', ['$parse', function slider($parse) { return { restrict: 'A', link: function(scope, element, attrs) { var val = $parse(attrs.sliderBind); scope.$watch(val, function(newVal, oldVal) { element.slider('setValue', newVal); }); // when the slider is changed, update the scope // property. // Note that this will only update it when you stop dragging. // If you need it to happen whilst the user is dragging the // handle, change it to "slide" instead of "slideStop" // (this is not as efficient so I left it up to you) element.on('slideStop', function(event) { // if expression is assignable if (val.assign) { val.assign(scope, event.value); scope.$digest(); } }); } } } ]); 此标记略有更改为： <div class="slider slider-default"> <input type="text" data-slider-bind="slider2" class="slider-span" value="" data-slider-orientation="vertical" data-slider-min="0" data-slider-max="200" data-slider-selection="after" data-slider-tooltip="hide" /> </div> 请注意使用 data-slider-bind 属性来指定要绑定的范围属性，并且缺少 data-slider-value 属性。 希望这两个选项之一就是您所追求的。 我使用attr，它对我有用。试试这个： attr.data-slider-value="{{slider}}"
如果你在 AngularJS 模型中没有使用 .（点），你就做错了？
我记得在 AngularJS 的一个视频中看到过这句著名的引言，说应该始终使用 . （点）在您的模型中。 好吧，我正在尝试遵循我所说的 变量项 = {} 项目.tit...
如果我有一个返回日期的变量，格式为 dd MMM yyyy，即 2014 年 8 月 28 日，我如何获取上个月的日期。 我可以通过以下方式修改月份： $scope.DateMapping = 函数 (mo...
我正在使用 AngularJS 构建一个新应用程序，下文是对其的简化描述。 有一个页面，其中有药丸和选项卡（使用 Bootstrap）以及侧窗格...
我可以对模板中非常复杂的 POJO 树做些什么吗？ 例如 我可以对模板中非常复杂的 POJO 树做些什么吗？ 例如 <div important-attr="{{item.another_sub_item_three.lets_go_a_little_dipper.property}} " another-important-attr="{{ item.another_sub_item_three.just_one_more.another-property }}" > </div> 请注意，我无法控制数据结构，它来自旧版 API。 使用 ng-repeat 可能是一个解决方案，但这感觉不对，特别是因为这不是一个集合，它只是一个项目。 <div ng-repeat="prop in item.another_sub_item_three.lets_go_a_little_dipper" important-attr="{{prop.property}}" another-important-attr="{{prop.another-property}}" > </div> 如果您使用 $http 与旧版 API 交互，则可以使用 transformResponse 属性将响应更改为更易于管理的响应。 $http({ method: 'GET', url: '...', transformResponse: function(data) { /* transform data then */ return data } }) 如果您不使用 $http，则代码中可能还有另一个逻辑位置，您可以在 API 响应被模板使用之前对其进行转换。
为什么 AngularJS 形式的 ng-pristine 类总是返回 true
为什么 AngularJS 形式的 ng-pristine 类总是返回 true。 在输入字段中输入一个值并单击按钮，它不会返回 false，而是返回 true。 测试.html 为什么 AngularJS 形式的 ng-pristine 类总是返回 true。 在输入字段中输入一个值并单击按钮，它不会返回 false，而是返回 true。 测试.html <div ng-app="myModule"> <div ng-controller="myController"> <form name="myForm" ng-submit="su()"> <input name="input1" type="text"> <button id="button1" type="submit" >>>>>></button> </form> myForm.$pristine : {{results}} </div> </div> 测试.js var module = angular.module("myModule", []); module.controller("myController", function($scope) { $scope.su = su; $scope.results = "default"; function su() { $scope.results = $scope.myForm.$pristine; } }); 我们需要给表单元素添加 ng-model 属性，这样 pristine 和 dirty 都会更新，之后就可以正常工作了。 Pristine 定义如下 原始： ng-pristine 类表明表单尚未被用户修改。如果用户未修改表单，则返回 true。返回类型：如果用户未修改表单/输入字段，则返回 Boolean True，否则返回 False。 原始肮脏物品 下面的工作示例！ var module = angular.module("myModule", []); module.controller("myController", function($scope) { $scope.su = su; $scope.results = "default"; function su() { $scope.results = $scope.myForm.$pristine; } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script> <div ng-app="myModule"> <div ng-controller="myController"> <form name="myForm" ng-submit="su()"> <input name="input1" type="text" ng-model="input1"> <div class="info" ng-show="myForm.input1.$pristine"> Now Pristine </div> <div class="error" ng-show="myForm.input1.$dirty"> Now Dirty </div> <button id="button1" type="submit" >>>>>></button> </form> myForm.$pristine : {{myForm.$pristine}} </div> </div>
AngularJS：根据用户是否获得授权来保护 AngularJS 路由？
我刚刚开始使用我正在开发的 AngularJS 应用程序，一切都很顺利，但我需要一种保护路线的方法，以便用户不会被允许访问该路线，如果不...
为什么 $scope >= 0 在插值中显示 true，而在控制器中显示为空？
我根据成功的操作将 $scope 变量设置为 0 或 1，并使用 ng-show 显示元素。该步骤完成后，我将 $scope 变量重置为空。然而，我发现...
如果为 false 或 null/未定义，则 angularjs 选择元素
我有下面的代码，但如果 s.x.user_chose_is_formula 为 false、null 或未定义（全部在一个选项中），我希望选择“否”。我怎么做？ md-输入-container.values-
我的 Angular 发生了一些奇怪的事情。 我有一个带有编辑按钮的详细信息视图。当我按下编辑按钮时，我将对象传递到编辑视图。在编辑表单上有一些下拉框...
在jsp页面中从日期选择器中选择日期时，格式如下。 从印度登录时，日期选择器格式如下： 字符串 datestr = "2014 年 1 月 1 日星期三 00:00:00...
如何将打开焦点功能（类似于 Microsoft Windows 7 日历）添加到我的日历中，如我们使用 Angular Material 版本 1.0.1 的演示中所示，请帮助我解决方案。 谢谢广告...
我有一个带有 ng-change 事件处理程序的下拉菜单： 人： ... 我有一个带有 ng-change 事件处理程序的下拉菜单： <label>Person:</label> <select class="form-control" ng-model="select" ng-change="change()"> <option value="0">a </option> <option value="1">b </option> <option value="2">c </option> </select> 更改时，我将数组中的数据分配给 $scope.person: $scope.change = function(){ $scope.person = $scope.persons[$scope.select]; }; 数组： $scope.persons = [ {'name': 'Peter'}, {'name': 'John'}, {'name': 'Mark'} ]; 当选择一个人时（例如 $scope.select == 0/Peter），可以通过单选按钮向该人添加值（$scope.person.value）： <label><input type="radio" ng-model="person.value" value="1"> Value 1 </label><br/> <label><input type="radio" ng-model="person.value" value="2"> Value 2</label><br/> <label><input type="radio" ng-model="person.value" value="3"> Value 3</label><br/> 当将值（$scope.person.value）添加到人员时，我更改下拉列表，我想删除/清除该值。因此，当您在下拉列表中重新选择该人时， $scope.person.value 是未定义的。 $scope.change = function(){ //This is not working delete $scope.person; // This is not working either $scope.person.value = ''; $scope.person = $scope.persons[$scope.select]; }; 我想知道如何在更改下拉列表时清除 $scope.person.value 中存储的值。现在，当我重新选择该人时，该变量仍然被定义。 这是一个工作示例。 我认为变量仍然被保存，你应该自己删除该值： $scope.change = function(){ delete $scope.person; $scope.person = ''; $scope.person = $scope.persons[$scope.select]; //Remove the assigned value delete $scope.person.value; }; 你的问题就在这里 $scope.person = $scope.persons[$scope.select]; 当你这样做，然后分配一个“value”属性时，你实际上修改了persons数组中的对象。试试下面， $scope.change = function() { $scope.person = angular.copy($scope.persons[$scope.select]); console.log($scope.person); }; $scope.$watch('person.value', function(n) { console.log(n); }); 正如@Kevin Sanchez所说，你需要从人身上删除value。 像这样delete $scope.person.value； jsfiddle上的实时示例。 var myApp = angular.module('myApp', []); function MyCtrl($scope) { $scope.persons = [{ 'name': 'Peter' }, { 'name': 'John' }, { 'name': 'Mark' }]; $scope.change = function() { if ($scope.person) delete $scope.person.value; $scope.person = $scope.persons[$scope.select]; }; } <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="MyCtrl"> <label>Person:</label> <select class="form-control" ng-model="select" ng-change="change()"> <option value="0">a</option> <option value="1">b</option> <option value="2">c</option> </select> <br> <br>{{ person }} <br> <br> <label> <input type="radio" ng-model="person.value" value="1">Option 1</label> <br/> <label> <input type="radio" ng-model="person.value" value="2">Option 2</label> <br/> <label> <input type="radio" ng-model="person.value" value="3">Option 3</label> <br/> </div> </div>
ng-click 显示 ng-repeat 上的所有隐藏文本字段，而不是 Angular 中的一个
我开始使用Angular，实现起来非常好。我在 ng-click 中遇到了一个问题。 我正在动态获取数据并使用 ng-repeat 显示，并且我想在
如何从 AngularJS 应用程序中使用的 Angular 组件传递数据？
用例： 我在 AngularJS 应用程序中使用了一个 Angular 组件。该组件将： 发送将编辑 AngularJS 父页面某些方面的 API 调用 在那个 API 调用之后......