Question

尝试从指令更改变量的值时出现问题。

我做了一个plunker所以它更容易理解，因为我无法正确解释它。我有两个按钮列表：

一个由三个按钮组成，当ng-show为true时显示。（plunker中的'module'变量）
另一个由其他组成的按钮改变了这个“模块”变量。

问题是，当我在单击第二个列表中的按钮[它实际上调用一个函数]时更改'module'变量时，该指令不会更新它，因此第一个按钮列表也不会更新。（第一个按钮仍然显示但它应该消失并弹出另一个按钮。）

所以我读了一些关于它的主题，我发现我应该在指令中执行一个watch函数来捕获所有的变化。但它不起作用。它只通过一次而且它在开头。

// 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="bootstrap@*" 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="angular.js@*" 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

我道歉，我不知道自己是否清楚如此，如果你想要更多的信息，请问我。有人可以开导我吗？

谢谢！

Answer 1

那是因为您在AngularJS上下文之外更改数据。

我修好了你的弹药here

你的错误是：

更改AngularJS以外的数据
onClick代替ng-click
'module': '@'在指令隔离范围内而不是'module': '='
{{ng-show="module == 1}}代替ng-show="module == 1"

祝你好运！

AngularJS更新指令中的值

1 个答案: