标签: angularjs-scope

AngularJS加载完成后发送事件

当所有指令完成编译/链接时,想知道检测页面加载/引导完成的最佳方法是什么.

有没有活动?我应该重载引导功能吗?

angularjs angularjs-scope

113
推荐指数
5
解决办法
13万
查看次数

以角度更新父范围变量

我有两个控制器,一个包裹在另一个.现在我知道子范围从父范围继承属性,但有没有办法更新父范围变量?到目前为止,我没有遇到任何明显的解决方案.

在我的情况下,我在表单中有一个日历控制器.我想从父作用域(即表单)更新开始日期和结束日期,以便表单在提交时具有开始日期和结束日期.

javascript angularjs angularjs-scope

113
推荐指数
3
解决办法
8万
查看次数

选择ng-option更改时获取值

我在.html页面中有一个下拉列表,

落下:

<select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
    <option value="">Select Account</option>
</select>
Run Code Online (Sandbox Code Playgroud)

我想在用户选择值时执行操作.所以在我的控制器中我做到了:

控制器:

$scope.$watch('blisterPackTemplateSelected', function() {
    alert('changed');
    console.log($scope.blisterPackTemplateSelected);
});
Run Code Online (Sandbox Code Playgroud)

但是更改下拉列表中的值不会触发代码: $scope.$watch('blisterPackTemplateSelected', function()

结果,我ng_change = 'changedValue()'在select标签上尝试了另一种方法:

功能:

$scope.changedValue = function() {
   console.log($scope.blisterPackTemplateSelected);
}
Run Code Online (Sandbox Code Playgroud)

但是blisterPackTemplateSelected存储在子范围内.我读到父母无法访问子范围.

当下拉列表中的选定值发生变化时,执行某些操作的正确/最佳方法是什么?如果它是方法1,我的代码怎么办?

angularjs angularjs-scope

113
推荐指数
5
解决办法
34万
查看次数

AngularJS:指令范围内=&@之间的差异?

在指令中创建隔离范围允许我们将外部范围映射到内部范围.我们已经看到了六种不同的方式来映射到attrbutes:

  1. =属性
  2. &ATTR
  3. @attr
  4. =
  5. &
  6. @

每个范围映射选项的作用是什么?

angularjs angularjs-directive angularjs-scope isolated-scope

107
推荐指数
2
解决办法
5万
查看次数

将当前范围传递给AngularJS服务

将"当前"传递$scope给AngularJS服务是否正确?

我正处于这样一种情况,我知道它仅由一个控制器消耗,并且我希望在$ service方法本身中引用控制器的范围.

这在哲学上是否正确?

或者我最好将事件广播到$ rootScope然后让我的控制器听取它们?

data-binding angularjs angularjs-scope angular-services

106
推荐指数
4
解决办法
7万
查看次数

AngularJS:当从模型数组拼接模型元素时,不会更新ng-repeat列表

我有两个控制器,并使用app.factory函数在它们之间共享数据.

第一个控制器在单击链接时在模型数组(pluginsDisplayed)中添加一个小部件.小部件被推入阵列,此更改将反映到视图中(使用ng-repeat显示数组内容):

<div ng-repeat="pluginD in pluginsDisplayed">
    <div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

该小部件基于三个指令构建,k2plugin,remove和resize.remove指令将span添加到k2plugin指令的模板中.单击所述span时,将删除共享数组中的右元素Array.splice().共享阵列已正确更新,但更改反映在视图中.但是,添加另一个元素后,在删除后,视图将正确刷新,并且不会显示先前删除的元素.

我错了什么?你能解释一下为什么这不起作用吗?有没有更好的方法来做我想用AngularJS做的事情?

这是我的index.html:

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js">
        </script>
        <script src="main.js"></script>
    </head>
    <body>
        <div ng-app="livePlugins">
            <div ng-controller="pluginlistctrl">
                <span>Add one of {{pluginList.length}} plugins</span>
                <li ng-repeat="plugin in pluginList">
                    <span><a href="" ng-click="add()">{{plugin.name}}</a></span>
                </li>
            </div>
            <div ng-controller="k2ctrl">
                <div ng-repeat="pluginD in pluginsDisplayed">
                    <div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
                </div>
            </div>
        </div>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

这是我的main.js:

var app = angular.module ("livePlugins",[]);

app.factory('Data', function () {
    return {pluginsDisplayed: []};
});

app.controller ("pluginlistctrl", function ($scope, …
Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

101
推荐指数
3
解决办法
16万
查看次数

检查对象是否为空,使用ng-show但不能使用控制器?

我有一个像这样声明的JS对象

$scope.items = {};
Run Code Online (Sandbox Code Playgroud)

我还有一个$ http请求,用项目填充此对象.我想检测这个项目是否为空,看来ng-show支持这个...我输入

ng-show="items"
Run Code Online (Sandbox Code Playgroud)

并且神奇地它可以工作,我也想从控制器做同样的事情,但我似乎无法让它工作,似乎我可能必须迭代对象,看看它是否有任何属性或使用lodash或下划线.

还有其他选择吗?

我确实试过了

alert($scope.items == true);
Run Code Online (Sandbox Code Playgroud)

但是当对象被创建并填充时$http,它总是返回false,所以它不会那样工作.

angularjs angularjs-scope

98
推荐指数
7
解决办法
32万
查看次数

如何将控制器注入AngularJS中的另一个控制器

我是Angular的新手并试图找出如何做事......

使用AngularJS,如何注入要在另一个控制器中使用的控制器?

我有以下代码段:

var app = angular.module("testApp", ['']);

app.controller('TestCtrl1', ['$scope', function ($scope) {
    $scope.myMethod = function () {
        console.log("TestCtrl1 - myMethod");
    }
}]);

app.controller('TestCtrl2', ['$scope', 'TestCtrl1', function ($scope, TestCtrl1) {
    TestCtrl1.myMethod();
}]);
Run Code Online (Sandbox Code Playgroud)

当我执行此操作时,我收到错误:

Error: [$injector:unpr] Unknown provider: TestCtrl1Provider <- TestCtrl1
http://errors.angularjs.org/1.2.21/$injector/unpr?p0=TestCtrl1Provider%20%3C-%20TestCtrl1
Run Code Online (Sandbox Code Playgroud)

我是否应该尝试在另一个控制器内使用控制器,还是应该将其作为服务?

angularjs angularjs-scope angularjs-controller

96
推荐指数
3
解决办法
14万
查看次数

指令隔离范围与AngularJS中的ng-repeat范围

我有一个带隔离范围的指令(这样我可以在其他地方重用该指令),当我使用这个指令时ng-repeat,它无法工作.

我已阅读有关此主题的所有文档和Stack Overflow答案,并了解问题.我相信我已经避免了所有常见的陷阱.

所以我理解我的代码因ng-repeat指令创建的范围而失败.我自己的指令创建了一个isolate-scope,并对父作用域中的对象进行双向数据绑定.我的指令将为这个绑定变量赋一个新的对象值,当我的指令没有使用时ng-repeat(父变量被正确更新),这种方法非常有效.但是,使用ng-repeat,赋值在ng-repeat作用域中创建一个新变量,而父变量看不到更改.所有这些都是基于我所读到的预期.

我还读到,当给定元素上有多个指令时,只创建一个范围.并且priority可以在每个指令中设置a 来定义指令的应用顺序; 指令按优先级排序,然后调用它们的编译函数(在http://docs.angularjs.org/guide/directive上搜索单词优先级).

所以我希望我可以使用优先级来确保我的指令首先运行并最终创建一个隔离范围,并且在ng-repeat运行时,它重新使用隔离范围而不是创建原型继承父范围的范围.该ng-repeat文档声明该指令以优先级运行1000.目前尚不清楚1是优先级更高还是优先级更低.当我1在我的指令中使用优先级时,它没有任何区别,所以我尝试了2000.但这会让事情变得更糟:我的双向绑定变成了undefined我的指令并没有显示任何东西.

我创造了一个小提示来展示我的问题.我已经priority在我的指令中注释掉了这个设置.我有一个名称对象列表和一个名为对象的指令name-row,它显示了名称对象中的名字和姓氏字段.单击显示的名称时,我希望它selected在主范围中设置变量.名称数组,selected变量name-row使用双向数据绑定传递给指令.

我知道如何通过调用主范围中的函数来使其工作.我也知道如果selected在另一个对象内部,并且我绑定到外部对象,事情就会起作用.但我现在对这些解决方案不感兴趣.

相反,我的问题是:

  • 如何防止ng-repeat从创建prototypically从父范围继承的范围,而是把它用我的指令的分离,范围有多大?
  • 为什么2000我的指令中的优先级不起作用?
  • 使用Batarang,是否可以知道正在使用哪种类型的示波器?

angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

95
推荐指数
2
解决办法
5万
查看次数

从AngularJS中没有隔离范围的指令调用控制器函数

我似乎无法在不使用隔离范围的情况下从指令中调用父作用域上的函数.我知道如果我使用隔离范围,我可以在隔离中使用"&"来访问父范围上的函数,但是在没有必要时使用隔离范围会产生后果.请考虑以下HTML:

<button ng-hide="hideButton()" confirm="Are you sure?" confirm-action="doIt()">Do It</button>
Run Code Online (Sandbox Code Playgroud)

在这个简单的例子中,我想显示一个JavaScript确认对话框,如果他们在确认对话框中单击"确定",则只调用doIt().使用隔离范围很简单.该指令看起来像这样:

.directive('confirm', function () {
    return {
        restrict: 'A',
        scope: {
            confirm: '@',
            confirmAction: '&'
        },
        link: function (scope, element, attrs) {
            element.bind('click', function (e) {
                if (confirm(scope.confirm)) {
                    scope.confirmAction();
                }
            });
        }
    };
})
Run Code Online (Sandbox Code Playgroud)

但问题是,因为我使用的是隔离范围,上面示例中的ng-hide不再针对父范围执行,而是在隔离范围内执行(因为在任何指令上使用隔离范围会导致该元素上的所有指令使用孤立的范围).这是上面例子的jsFiddle,其中ng-hide不起作用.(请注意,在此小提琴中,当您在输入框中键入"yes"时,该按钮应隐藏.)

替代方案是不使用隔离范围,这实际上是我真正想要的范围,因为不需要隔离此指令的范围.我唯一的问题是,如果我没有在隔离范围内传递它,如何在父范围上调用方法

这是一个jsfiddle我不使用隔离范围,ng-hide工作正常,但是,当然,对confirmAction()的调用不起作用,我不知道如何使它工作.

请注意,我真正寻找的答案是如何在外部作用域上调用函数而不使用隔离的作用域.我不想以另一种方式使这个确认对话框工作,因为这个问题的关键是要弄清楚如何调用外部作用域,并且仍然能够使其他指令对父作用域起作用.

或者,如果其他指令仍然适用于父作用域,我有兴趣听到使用隔离作用域的解决方案,但我认为这不可行.

angularjs angularjs-directive angularjs-scope

95
推荐指数
3
解决办法
9万
查看次数