个人中心
gpt4 book ai didi

javascript - 范围更改不执行指令中的代码

转载 作者：行者123 更新时间：2023-11-30 17:53:51 26 4
gpt4 key购买 nike

这是我的指令的样子

//noinspection JSCheckFunctionSignatures
angular.module('notificationDirective', []).directive('notification', function ($timeout) {
    //noinspection JSUnusedLocalSymbols
    return {
        restrict: 'E',
        replace: true,
        scope: {
            ngModel: '@'
        },
        template: '<div class="alert fade" bs-alert="ngModel"></div>',
        link: function (scope, element, attrs) {
            scope.$watch('message', function () {
                console.log('message now: ' + JSON.stringify(scope.message));
//                element.show();
//                //noinspection JSUnresolvedFunction
//                $timeout(function () {
//                    //element.empty();
//                    element.fadeOut("slow");
//                }, 2000);
            });
        }
    }
});

这是我的 Controller 

function NotificationController($scope) {
    $scope.message = {};
    console.log('notification activated');

    $scope.invite = function() {
        console.log("submitting invite for " + $scope.email);
        $scope.message.title = 'hello';
//        console.log('message now is ' + JSON.stringify($scope.message, null, 2));
    }
}

我是这样用的

<form class="pure-form" data-ng-controller="NotificationController">
    <input type="text" class="pure-input-1-2" placeholder="Email"
           data-ng-model="email">
    <button type="submit"
            class="pure-button notice pure-button-xlarge"
            data-ng-click="invite()">Invite me
    </button>
</form>
<notification data-ng-model="message"></notification>

我想要的
- 每当 NotificationController 中的 scope.message 值发生变化时，指令就会有新值，这样我就可以在网页上提醒它

我不明白的地方
看来我不明白 $scope.$watch 是如何工作的

请帮忙

最佳答案

你犯了几个错误:

  1. 您的通知标记必须位于 Controller 内(在 html 中)，因为它必须能够访问“消息”变量。
  2. 您在指令中的绑定(bind)是错误的:您必须使用“=”而不是“@”(如 Thalis 所说)。
  3. 变量“message”在您的指令中不存在，您必须使用 scope.ngModel(绑定(bind)到您的 message 变量)。
  4. 每次更新变量时，都会执行观察者中的回调。由于您使用了一个对象，因此当您的变量引用发生变化时，观察者将被执行。您必须将“true”设置为观察者的第三个参数以检查对象是否相等)。

这是您的示例:

HTML:

<body>
    <div id="my-app" data-ng-app="myApp">
        <form class="pure-form" data-ng-controller="NotificationController">
            <input type="text" class="pure-input-1-2" placeholder="Email" data-ng-model="email" />
            <button type="submit"
              class="pure-button notice pure-button-xlarge"
              data-ng-click="invite()">Invite me
            </button>
            <notification data-ng-model="message"></notification>
        </form>        
    </div>
</body>

Javascript:

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

myApp.directive('notification', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            ngModel: '='
        },
        template: '<div class="alert fade" bs-alert="ngModel"></div>',
        link: function (scope, element, attrs) {
            scope.$watch('ngModel', function () {
                console.log('message now: ' + JSON.stringify(scope.ngModel));
//                element.show();
//                //noinspection JSUnresolvedFunction
//                $timeout(function () {
//                    //element.empty();
//                    element.fadeOut("slow");
//                }, 2000);
            }, true);
        }
    }
});

myApp.controller('NotificationController', ['$scope', function($scope) {
    $scope.message = {};
    console.log('notification activated');

    $scope.invite = function() {
        console.log("submitting invite for " + $scope.email);
        $scope.message.title = 'hello';
//      console.log('message now is ' + JSON.stringify($scope.message, null, 2));
    };
}]);

请参阅此 fiddle :http://jsfiddle.net/77Uca/15/

关于javascript - 范围更改不执行指令中的代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18445401/

26 4 0
文章推荐： c# - 为什么 System.Exception 影子 GetType()
文章推荐： c# - 尽管字典被实例化，但字典属性始终为 null
文章推荐： c# - 将 C++ 指针结构转换为 C#
文章推荐： javascript - 从 gridview 超链接调用具有多个参数的 Javascript 函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com