搜尋

首頁  >  問答  >  主體

angular.js - Angular控制器和指令的交互

HTML部分

<index></index>

指令

angular.module('todoWithAngularApp').directive('index', function () {
    return {
        restrict: 'E',
        templateUrl: '/scripts/template/index.html',
        replace: true,
        link: function (scope, iElement, iAttrs) {
            console.log(scope);
            console.log(iElement);
            console.log(iAttrs);

            iElement.on('click', '#addTaskClass', function(event) {
                scope.addTaskClassBoxDisplay = true;
                console.log(scope.addTaskClassBoxDisplay);

            })
        }
    };

控制器

angular.module('todoWithAngularApp').controller('IndexCtrl', function ($scope) {
    $scope.addTaskClassBoxDisplay = false;
});

怎麼能讓指令去修改控制器上的$scope的屬性

淡淡烟草味淡淡烟草味2821 天前776

全部回覆(6)我來回復

  • 阿神

    阿神2017-05-15 16:55:35

    不負責任未經驗證的提供幾個想法:
    1.把addTaskClassBoxDisplay放到物件下面,例如
    scope.obj.addTaskClassBoxDisplay = true
    2.使用訊息
    3.使用service

    以上3種方法也是angular通用的模組間共享資料的方式,可分別適應不同場景。

    回覆
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-15 16:55:35

    http://stackoverflow.com/questions/14115701/angularjs-create-a-directi...


    雷雷

    回覆
    0
  • 为情所困

    为情所困2017-05-15 16:55:35

    先開一個獨立的scope,對scope的一個物件用‘=’來進行雙向綁定,就如下面的例子,指令的obj跟addTaskClassBoxDisplay 物件進行了綁定跟傳輸

    angular.module('todoWithAngularApp').directive('index', function () {
        return {
            restrict: 'E',
            scope:{
                'obj': '=obj'
            },
            templateUrl: '/scripts/template/index.html',
            replace: true,
            link: function (scope, iElement, iAttrs) {
            }
        };
    
    
    ========================
    
    
    <index obj="addTaskClassBoxDisplay "></index>
    
    
    

    回覆
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-15 16:55:35

    在你問這個問題之前,我先修正一下問題。
    你想修改controller的$scope。首先你自己定義的指令就是用的controller中的scope。它沒有繼承或獨立出來一個scope。所以你修改你指令的scope下的屬性一定會修改引用這個指令的controller的scope對應屬性。
    你可能會問,為何我寫的這個沒有修改controller的scope呢?
    原因在於你使用了
    iElement.on('click', '#addTaskClass', function(event) {
    scope.addTaskClassBoxDisplay = true;
    你自己定義的click監聽器,觸發修改scope屬性,它不會通知angular進行髒檢查的。也就是說你修改了addTaskClassBoxDisplay,它在頁面上也不會有反應的。
    如何修改這個錯誤。 增加 $apply()即可。手動觸發髒檢查。怎麼用,自行百度。
    接下來回到你的問題。如何讓directive修改controller的scope。
    一、首先從directive內部屬性說起。
    directive的scope屬性,它的三種方法都可以修改controller的scope。
    1.scope不定義或scope:false。它是直接使用的controller的scope
    2.scope:true。它是繼承controller的scope。這時候,你要修改的內容最好定義為一個物件。
    3.scope:{key:'=key'}。它是獨立出一個scope。修改方法同上,最好定義為物件
    然後再講一個。使用 iAttrs,將它定義給指令上的屬性。
    var model = $parse(iAttrs.addTaskClassBoxDisplay);
    iElement.on('click', '#addTaskClass', function(event) {
    model.assign(scope,true);
    scope.$apply();
    二、使用廣播。具體百度。
    三、使用service來傳遞。
    四、指令呼叫$rootScope 然後讓controller的scope屬性等於$rootScope的屬性。 (千萬別這麼做)
    要上班了,後邊的你自己百度吧。

    回覆
    0
  • 世界只因有你

    世界只因有你2017-05-15 16:55:35

    http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/
    基礎: http://www.hubwiz.com/course/547c3e3b88dba0087c55b4e5/

    回覆
    0
  • 漂亮男人

    漂亮男人2017-05-15 16:55:35

    非常好的問題,我也想問的

    回覆
    0
  • 取消回覆