AngularJS更新指令中的值

嘗試更改指令中某個變量的值時遇到問題。AngularJS更新指令中的值

我做了一個笨蛋，所以它更容易理解，因爲我無法正確解釋它。我有兩個按鈕列表：

其中一個由三個按鈕組成，它們在ng-show爲true時顯示。（plunker中的'module'變量）
另一個由其他按鈕組成，它們改變這個'模塊'變量。

事情是，當我點擊第二個列表中的按鈕[它實際上調用函數]來更改'模塊'變量時，指令不會更新它，因此第一個按鈕列表不會更新太。（第一個按鈕仍然顯示，但它應該消失並使另一個按鈕彈出）。

所以我讀了幾個關於它的話題，我發現我應該在指令中做一個監視函數來捕捉所有的變化。但它不起作用。它只通過一次，它是在開始。

// index.html 
<!DOCTYPE html> 
<html> 

    <head> 
    <link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" /> 
    <link data-require="[email protected]*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script> 
    <script data-require="[email protected]*" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script> 
    <script src="script.js"></script> 
    <script src="appDirective.js"></script> 
    <script src="appController.js"></script> 
    </head> 

    <body ng-app="tmp"> 
    <app-module module="1" id="module"></app-module> 
    <button onClick="changeModule(2)">Change to 2</button> 
    <button onClick="changeModule(3)">Change to 3</button> 
    </body> 

</html> 


// script.js 
angular.module('tmp', []); 

changeModule = function(value) { 
    console.log(value); 
    $('#module').attr('module', value); 
} 


// appDirective.js 

'use strict'; 
angular.module('tmp') 

.directive('appModule', function() { 

    return { 
     restrict: 'AE', 
     templateUrl: "app.html", 
     controller: "appController", 
     scope: { 
      state: "@", 
      'module' : '@' 
     }, 
     link: function($scope) { 
      $scope.$watch('module', function(newVal) { 
       console.log(newVal); 
      }, true); 
     } 

    } 
}); 


// appController.js 
'use strict'; 

angular.module('tmp') 

    .controller('appController', ["$scope", function ($scope) { 

     $scope.sendData = function() { 
     }; 

    } 

    ]); 

// app.html 

<submit ng-click="sendData()"> 
    <button class="btn btn-block btn-social btn-google" style="text-align:center;margin-left: auto;margin-right: auto;display: inline-block;" ng-show="{{module == 1}}"> 
    <span class="fa fa-google"></span> Google button 
    </button> 
    <button class="btn btn-block btn-social btn-github" style="margin-left: auto;margin-right: auto;text-align:center;display: inline-block;" ng-show="{{module == 2}}"> 
    <span class="fa fa-github"></span> Github button 
    </button> 
    <button class="btn btn-block btn-social btn-facebook" style="margin-left: auto;margin-right: auto;text-align:center;display: inline-block;" ng-show="{{module == 3}}"> 
    <span class="fa fa-facebook"></span> Facebook button 
    </button> 
</submit>

Plunker：https://plnkr.co/edit/xBHCDCygCmra62wMGnsM?p=preview

我很抱歉，我不知道我是否說清楚了，所以如果你想了解更多的信息，就問我。請有人賜教我嗎？

謝謝！

來源

2016-11-11 NPanda

使用'ng-click'指令來調用點擊處理程序。「點擊式」會混淆全局名稱空間。 – georgeawg

是啊，我的壞，但它仍然不工作......謝謝你回答，雖然 – NPanda

這是因爲您更改了AngularJS上下文之外的數據。

我定你的plunker here

你的錯誤是：

變化數據外AngularJS
onClick而不是ng-click
'module': '@'內部指令隔離範圍，而不是'module': '='
{{ng-show="module == 1}}代替的ng-show="module == 1"

祝你好運！

來源

2016-11-11 20:16:40 Antonio

非常感謝！ :) – NPanda

AngularJS更新指令中的值

回答

相關問題