标签: angularjs-scope

AngularJS具有基于DOM的控制器继承,如角度文档中所述.

<div ng-controller="BaseController">
    <p>Base Controller Value: {{value}}</p>
    <button ng-click="updateValue()">Update In Base</button>
    <div ng-controller="DerivedController">
        <p>Derived Controller Value: {{value}}</p>
        <button ng-click="updateValue()">Update In Derived</button>
    </div>
</div>

范围变量"value"仅出现在BaseController中.基于此,在BaseController或DerivedController中更改方法的值时,我希望两个值都需要更新.但只有单个范围变量才会更新.

这是一个演示相同示例的小提琴:http://jsfiddle.net/6df6S/1/

如何在一个级别上进行更改以传播到当前作用域的直接子级和直接父级.

我们可以通过使用实现这一点

$范围.$腕表

没有使用它或任何这样的观察者,有没有办法做到这一点？

编辑1:

通过使用$ scope.$ watch这就是我的意思

$scope.$watch("value", function () {
   $scope.$broadcast("childChangeListener"); //Downwards to all children scopes
   $scope.$emit("parentChangeListener"); //Upwards to all parent scopes
});

我一直在寻找在不使用这种机制的情况下在所有范围内更新值的方法.

我是angularjs的新手,想要点击复选框时创建模型数组,下面是我的代码..

$scope.selectedAlbumSongs = [{
    'name': 'song1',
        'url': 'http://test/song1.mp3'
}, {
    'name': 'song2',
        'url': 'http://test/song2.mp3'
}, {
    'name': 'song3',
        'url': 'http://test/song3.mp3'
}];
$scope.playList = {};

HTML:

<fieldset data-role="controlgroup">
    <legend>Select songs to play</legend>
    <label ng-repeat="song in selectedAlbumSongs">
        <input type="checkbox" name="{{song.url}}" id="{{song.name}}" ng-model="playList[song.url]">
        <label for="{{song.name}}">{{song.name}}</label>
    </label>
</fieldset>

当我单击复选框时,上面的代码更新了playList,如下所示

{
    "http://test/test1.mp3": true,
    "http://test/test2.mp32": true,
    "http://test/test3.mp3": false
}

但我想以下面的格式创建ng-model,并在取消选中该复选框时删除该对象(例如,如果取消选中song3,则从该数组中删除song3对象).你能告诉我怎么写这个逻辑吗？

预期:

[{
    name: "song1",
    url: "http://test/song1.mp3"
}, {
    name: "song2",
    url: "http://test/song2.mp3"
}]

如何在angularjs中使用HTML5地理定位？我可以使用HTML5获取它; 但是如何将它传递给控制器​​中的angularjs范围？任何样本jsfiddle都会节省我的一天!

一旦数据加载(在这种情况下通过$ resource),是否可以通过控制器设置输入字段的焦点？

输入通过ng-show隐藏,直到从API返回数据,但我找不到将注意力设置在输入上的方法.我知道输入的ng-model名称和输入名称,这意味着我可以通过jQuery来完成它,但我宁愿在可能的情况下使用AngularJS方式.

我在这里尝试过很多指令性示例,但它们似乎都是1.2 ng之前的焦点,首先依靠按钮点击按钮(在我的情况下不会发生)或者只是不起作用.
非常感谢任何提示.

我有一个AngularJs应用程序.我将控制器用于某些子范围.在每个Controller中,我可以设置许多属于相应子范围的变量.当AngularJs实例化一个控制器时,有一个构造函数,我可以在其中为我的子范围变量设置一个默认值.

我有控制器"析构函数"吗？我怎么知道控制器什么时候关闭并且范围正在被清理(由$ destroy函数销毁)？

谢谢!

我有一个在我的应用程序中的多个视图共享的子窗体.在一个视图中,此子窗体单独显示,底部有一个后退/继续按钮,引导用户进入下一个子窗体.在另一个视图中,子窗体显示在与其他子窗体相同的页面上(基本上是一个长格式).

由于子窗体的html在两个视图中都是100%相同,因此我将其分成部分并ng-include用于渲染它.在仅显示带有后退/继续按钮的子窗体的视图中,我在父HTML的内部渲染后退/继续按钮.

在视觉上,一切正常,我能够访问在表单(user.email, user.password, user.etc...)中输入的所有数据.

问题是我根据用户是否正确填写了表单来启用/禁用"继续"按钮,这在"仅子表单"变体中不起作用,因为父作用域似乎没有能够访问表单的状态.如果我将按钮粘贴在局部,它可以工作,但我不想这样做,因为按钮不属于每个使用此部分的实例.

JSFiddle示例

在我的示例中请注意,红色边框内的提交按钮被禁用,直到在框中键入内容并且"表单无效？" 值更新,而蓝色边框内的按钮始终启用和"表格无效？" 价值是空白的.

如何myForm.$invalid从父作用域访问值？

这是此问题的后续问题:具有焦点的AngularJS输入会杀死列表的ng-repeat过滤器

基本上我的代码使用AngularJS弹出右侧的div(抽屉)来过滤事物列表.大多数情况下,这是使用UI被阻止所以点击阻止div关闭抽屉.但在某些情况下,我们不会阻止UI,并且需要允许用户在抽屉外单击以取消搜索或在页面上选择其他内容.

我最初的想法是在抽屉打开时附加一个window.onclick处理程序,如果点击任何东西而不是抽屉,它应该关闭抽屉.这就是我在纯JavaScript应用程序中的表现.但在Angular中,它有点困难.

这是一个基于@Yoshi的jsBin示例的示例jsfiddle:http://jsfiddle.net/tpeiffer/kDmn8/

此示例中的相关代码段如下.基本上,如果用户点击抽屉外部,我会调用$ scope.toggleSearch,以便将$ scope.open设置回false.

代码有效,即使$ scope.open从true变为false,它也不会修改DOM.我确定这与事件的生命周期有关,或者当我修改$ scope(因为它来自一个单独的事件)它是一个副本而不是原始...

最终目标是使其成为最终可重用性的指令.如果有人能指出我正确的方向去做那件事,我将不胜感激.

$scope.toggleSearch = function () {

    $scope.open = !$scope.open;

    if ($scope.open) {
        $scope.$window.onclick = function (event) {
            closeSearchWhenClickingElsewhere(event, $scope.toggleSearch);
        };
    } else {
        $scope.$window.onclick = null;
    }
};

和

function closeSearchWhenClickingElsewhere(event, callbackOnClose) {

    var clickedElement = event.target;
    if (!clickedElement) return;

    var elementClasses = clickedElement.classList;
    var clickedOnSearchDrawer = elementClasses.contains('handle-right') 
        || elementClasses.contains('drawer-right') 
        || (clickedElement.parentElement !== null 
            && clickedElement.parentElement.classList.contains('drawer-right'));
    if (!clickedOnSearchDrawer) {
        callbackOnClose();
    }

}

我有一些代码没有按预期运行...我在AngularJS控制器中有一个事件监听器,如下所示:

$scope.$on("newClipSelected", function(e) {
    $scope.$apply(function() {
        $scope.isReady = true;
    });
});

控制器的标记有一个ng-show ='isReady'.当此事件处理程序运行时,ng-show区域将按预期显示.但是,此事件处理程序不起作用:

$scope.$on("newClipSelected", function(e) {
    $scope.isReady = true;
});

使用此事件处理程序,如果我使用调试器期望AngularJS范围,我确实看到$ scope.isReady = true,但是ng-show元素没有显示.

据我所知,$ scope.$ on实际上会调用$ watch/$.那么为什么我需要在这种情况下拨打$ apply？

该事件是通过在非angularJS异步完成事件中调用$ rootScope.$ broadcast()来触发的.

我在控制器内部有一个基于setInterval的函数.我注意到,在第一次调用它之后,它工作正常,但即使在路线改变后仍然继续.之后我尝试使用本机$ interval服务,它会自动跟踪范围的变化.然而问题仍然存在.所以现在我有两个问题.第一个是我能做什么,以便我在特定控制器内使用重复功能,当用户离开该路线时停止？另外,为什么范围功能会继续,因为我改变了范围？

更新 - 代码是这样的

$scope.refreshScore() {
        ....
      }
$scope.refreshMe = function(){
  $interval($scope.refreshScore, 10000);
}

我正在使用Typescript 2.1(开发人员版本)将async/await转换为ES5.

我注意到在我更改了在异步函数中绑定查看的任何属性后,视图不会使用当前值更新,所以每次我必须在函数结束时调用$ scope.$ apply().

示例异步代码:

async testAsync() {
     await this.$timeout(2000);
     this.text = "Changed";
     //$scope.$apply(); <-- would like to omit this
}

此后text,视图中不会显示新值.

是否有任何解决方法,所以我不必每次手动调用$ scope.$ apply()？