可以更新由控制器工厂而不是从指令 [英] Can update factory from controller but not from directive

问题描述

我试图创建模式模块，它可以从任何地方的应用程序中调用，但我已经遇到这可能突出了我的一个误解问题，但我看不出它是什么。

继承人的我想要达到的jsfiddle： http://jsfiddle.net/dwSX8/2 /

当我更新从控制器一切ModalAPI工作正常，但是当我做同样的指令罢了。

所以我的HTML是：

 ＆LT; D​​IV NG-应用=应用程序＆GT;
    ＆LT; D​​IV NG控制器=AppCtrl＆GT;
        ＆LT;按钮NG点击=退出（）＆GT;通过控制器＆LT; /按钮＆GT;
        ＆LT;按钮退出＆GT;通过指令＆LT; /按钮＆GT;
    ＆LT; / DIV＆GT;
    ＆LT;＆模式GT;＆LT; /莫代尔＆GT;
＆LT; / DIV＆GT;
 

和我的角JS的东西：

  angular.module（'模态'，[]）
.factory（'ModalAPI'，函数（）{    返回{
        标题：之前点击，
        开：功能（标题）{
            的console.log（'新标题：'+标题）;
            this.title =称号;
        }
    }
}）.directive（'模式'，函数（）{    返回{
        限制：'E'，
        范围： {}，
        更换：真实，
        控制器：函数（$范围，ModalAPI）{            $ scope.m = ModalAPI;            $ $范围手表（'modal.title'，切换）。            功能切换（）{
                的console.log（'----------模态改变!!!!'）;
            };
        }，
        模板：'＆LT; D​​IV＆GT; {{m.title}}＆LT; / DIV＆GT;'
    };
}）angular.module（'应用'，['模态']）
.controller（'AppCtrl'，函数（$范围，ModalAPI）{
    $ scope.logout =功能（）{
         的console.log（点击）;
         ModalAPI.open（'控制器后点击）
    }
}）
.directive（'注销'，函数（）{
    返回{
        限制：'E'，
        链接：功能（$范围，元素，ModalAPI）{
            element.bind（'点击'，功能（）{
                ModalAPI.open（'指令后点击）
            }）
        }
    }
}）
 

解决方案

绑定事件是角的范围之内。 角不知道该事件已经被解雇

因此​​，你必须要包装你在$电话应用功能：

  $范围。$应用（函数（）{
  element.bind（'点击'，功能（）{
    ModalAPI.open（'指令后点击）
  }）
}）;
 

延伸阅读： $

范围

I'm trying to create a Modal module that can be called from anywhere in the app but I've come across a problem that probably highlights a misunderstanding on my part but I can't see what it is.

Heres a jsFiddle of what I'm trying to achieve: http://jsfiddle.net/dwSX8/2/

When I update the ModalAPI from the controller everything works as expected, but when I do the same from a directive nothing.

So my HTML is:

<div ng-app="app">
    <div ng-controller="AppCtrl">
        <button ng-click="logout()">Via Controller</button>
        <button logout>Via Directive</button>
    </div>
    <modal></modal>
</div>

and my Angular JS stuff:

angular.module('Modal', [])
.factory('ModalAPI', function () {

    return {
        title: 'Before click',             
        open: function(title){
            console.log('new title: ' + title);
            this.title = title;
        }
    }
})

.directive('modal', function(){

    return {
        restrict: 'E',
        scope: {},
        replace:true,
        controller: function($scope, ModalAPI){

            $scope.m = ModalAPI;

            $scope.$watch('modal.title', toggle);

            function toggle() {
                console.log(' ---------- Modal changed!!!!');
            };
        },
        template: '<div>{{m.title}}</div>'
    };
})

angular.module('app', ['Modal'])
.controller('AppCtrl',  function ($scope, ModalAPI) {
    $scope.logout = function(){
         console.log('clicked');
         ModalAPI.open('After controller click')
    }
})
.directive('logout', function(){
    return{
        restrict: 'E',
        link: function($scope, element, ModalAPI) {
            element.bind('click', function(){
                ModalAPI.open('After directive click')
            })
        }
    }
})

解决方案

The bind event is outside of Angular's scope. Angular doesn't know that the event has been fired.

Therefore, you have to wrap your call in an $apply function:

$scope.$apply(function(){
  element.bind('click', function(){
    ModalAPI.open('After directive click')
  })
});

Further reading: $scope

这篇关于可以更新由控制器工厂而不是从指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！