标签: angularjs-scope

我正在努力理解模型的范围及其对范围有限的指令的约束.

我认为限制指令的范围意味着控制器.$ scope和directive.scope不再是同一个东西.但是,我对如何在指令模板或html中放置模型影响数据绑定感到困惑.我觉得我缺少一些非常基础的东西,继续前进我需要理解这一点.

请使用以下代码(在此处小提琴:http://jsfiddle.net/2ams6/)

JavaScript的

var app = angular.module('app',[]);
app.controller('Ctrl',function($scope){
});
app.directive('testel', function(){
    return {
        restrict: 'E',
        scope: {
            title: '@'
        },
        transclude: true,
        template:   '<div ng-transclude>'+
                    '<h3>Template title: {{title}}</h3>' +
                    '<h3>Template data.title:{{data.title}}</h3>' +
                    '</div>'
    }    
}); 

HTML

<div ng-app='app'>
    <div ng-controller="Ctrl">
        <input ng-model="data.title">
        <testel title="{{data.title}}">
            <h3>Transclude title:{{title}}</span></h3>
            <h3>Transclude data.title:{{data.title}}</h3>
        </testel>
    </div>
</div>

模型仅{{title}}在模板内和翻译{{data.title}}中更新.为什么不在翻译{{title}}中也不{{data.title}}在模板中？

将输入移动到translude中就像这样(在这里小提琴:http://jsfiddle.net/eV8q8/1/):

<div ng-controller="Ctrl">
    <testel title="{{data.title}}">
        <input ng-model="data.title">
         <h3>Transclude title: …

我需要在角度j的另一个控制器中调用函数.如果有可能,请提前帮助我

代码:

app.controller('One', ['$scope',
    function($scope) {
        $scope.parentmethod = function() {
            // task
        }
    }
]);
app.controller('two', ['$scope',
    function($scope) {
        $scope.childmethod = function() {
            // Here i want to call parentmethod of One controller
        }
    }
]);

我见过人们从他们的代码中的任何地方这样做:

$rootScope.$broadcast('someEvent', someParameter); 

然后在一些控制器中:

$rootScope.$on('someEvent', function(event, e){ /* implementation here */ });

现在,我想从一个指令中扩展一个事件.在rootScope级别播放它是一种好习惯吗？我想在控制器中处理这个事件.我可以使用$ scope,还是我还要听$ rootScope？

目前正在开展一个项目,当我们发现大量内存泄漏时,不清除已销毁范围内的广播订阅.以下代码修复了此问题:

var onFooEventBroadcast = $rootScope.$on('fooEvent', doSomething);

scope.$on('$destroy', function() {
    //remove the broadcast subscription when scope is destroyed
    onFooEventBroadcast();
});

这种做法是否也应该用于手表？代码示例如下:

var onFooChanged = scope.$watch('foo', doSomething);

scope.$on('$destroy', function() {
    //stop watching when scope is destroyed
    onFooChanged();
});

在我的一个Angular控制器中,我有这个:

// controller A
$rootScope.$on("myEventFire", function(event, reload) {
    someAction();
});

在另一个控制器中我有这个:

// controller B
$scope.openList = function(page) {
    $rootScope.$broadcast('myEventFire', 1);
}

现在,这是一个单页应用程序.当我最初转到控制器A并尝试触发此事件时,someAction()将被执行一次.如果我离开并再次回到控制器A并做同样的事情,someAction()会被执行两次.如果我再做一次,它会发生三次,依此类推.我在这做错了什么？

我现在正在阅读很多关于AngularJS的内容,并且我遇到了神奇的$ watch功能.我理解如何使用它,但我想知道它是如何在后台实现的.它是时间间隔功能吗？或者是Angular在每次执行声明时都会调用此表吗？

我现在不想深入研究源代码,如果你们中的一个人已经知道答案并希望分享他对这个主题的了解,我会很高兴.

谢谢.

在AngularJS中,我在控制器中有2个范围功能,

$scope.fn1 = function(){
//do something A
};

$scope.fn2 = function(){
    //do something B
    //I want to call fn1 here.
};

如果我的fn2想要调用fn1,我该怎么办？谢谢!

我问这个问题是因为我不太清楚如何将rootcope视为传递给指令的依赖

我有一个指令,需要显示来自$ rootScope的一些信息......

我以为我需要将$ rootScope传递给一个指令但是当我写这样的指令时它似乎有效.

.directive("myBar", function () {
 return {
    restrict: "E",
    transclude: true,
    replace: true,
    template:   '<div>' + 
                '<span ng-transclude></span>' + 
                '{{rsLabels.welcome}} {{rsUser.firstName}}!' + 
                '</div>'
}
})

我什么时候需要这样做？

.directive("myBar", function ($rootScope) {
 return {
    restrict: "E",
    transclude: true,
    replace: true,
    template:   '<div>' + 
                '<span ng-transclude></span>' + 
                '{{rsLabels.welcome}} {{rsUser.firstName}}!' + 
                '</div>'
}
})

如果我需要在指令的link函数中使用rootScope,我可以使用rootScope吗？或者我应该在指令的控制器中执行它？

.directive("myBar", function ($rootScope) {
 return {
    restrict: "E",
    transclude: true,
    replace: true,
    link: function (scope, element, attrs, rootScope) {
        rootScope.rsUser = { firstName: 'Joe' …

你如何获得元素属性值？

例如HTML元素:

<button data-id="345" ng-click="doStuff($element.target)">Button</button>

JS:

function doStuff(item){
    angular.element(item)[0].data('id'); // undefined is not a function
}

任何建议非常感谢,JSFIDDLE演示在这里:http://jsfiddle.net/h3TFy/

我一直致力于一个更像框架的项目,并且有几个可以安装的应用程序/模块.将其视为基本appstore或google.play商店.它是一种Intranet应用程序,所有模块都可以添加到您的useraccount中.

该框架已经在开发中,但我现在正在围绕应用程序/模块的想法.(链接到开发中的概念证明,可以在这里找到)

一个应用程序应该是独立的,并且不能突然包含来自框架的脚本,这完全可以通过在单独的模块中构造它们,如下所示:

angular.module('myApp', []);

然而,一个应用程序可以有模板,脚本,CSS,它可以在一个单独的服务器上运行,所以我有点寻找获取脚本和cssfile的最佳方法,并动态加载到应用程序当用户app从框架内启动时.

• 目前我正在构建应用程序,好像他们有一个主模板www.framework.com/apps/myapp/views/app.html,为了简单起见,我将脚本捆绑到每个应用程序的1个脚本文件中,因此还有一个www.framework.com/apps/myapp/script.js要包含的内容.

该框架包含一个加载应用程序的模板,以及一个appController.模板包含这篇文章:

<div data-ng-controller="AppController" data-ng-include="app.appTemplate">
    <div>loading...</div>
</div>

这基本上绑定到$scope.app.appTemplate加载所有脚本时更新的,所以首先它显示一个加载模板,稍后在脚本包含在页面中之后,它会更新app.appTemplate到上面提到的应用程序的主模板.

在加载第一个索引模板时,这个模板当前是AppController从框架加载的,所以它使用的$scope是框架,而不是它自己的脚本.

我仍然需要以某种方式启动应用程序自己的角度模块,让它自己运行而不在框架中运行任何东西以"让它工作"

我还在搞清楚如何最好地加载依赖的javascript文件(可能会使用requrejs或其他依赖加载器)但我目前还不知道如何在没有框架内部工作的情况下"启动"应用程序 AppController

编辑

我创建了一个小的演示项目来显示手头的问题,在git-hub上可以看到完整的代码,此时这个项目做了一些硬编码的事情,我的想法是当我得到证明概念是正确的,现在它是关于在框架内加载应用程序.如果可能,我可以考虑从哪里获取URL和应用程序名称...