AngularJS$viewValue未定义

我对Angular非常熟悉，并尝试实现此Angular buttons复选框绑定：，但我遇到一个错误“无法读取未定义的属性“$viewValue” 当我在浏览器控制台上调试时，ctrl显示为未定义。我在StackOverflow上尝试了很多答案，但经过几个小时的尝试后仍然无法回答

HTML

---

不要简单地用

范围绑定到
ngModel
。使用
要求
：

'require': 'ngModel'

你贴的小提琴很实用；fiddle和你的代码有什么不同？@Claies我将ngModel与下面Daniel建议的require绑定，看起来这是唯一的区别。它消除了初始错误，但显示了新错误：“找不到指令“button”所需的控制器“ngModel！”。我使用了以下语法：
require:'ngModel'
为指令选择一个名称，而不是
按钮
。否则，该指令将自身附加到模板中的每个按钮，包括您不想充当复选框的按钮。这可能就是问题所在。一个不是复选框的按钮现在需要一个
ng model
指令。@georgeawg是的，这肯定是问题所在，所有按钮都试图获取ng model指令。我重新命名了指令，现在它工作得很好。谢谢我这样做了，它消除了错误，但是即使两个复选框都未选中，按钮也会显示：/@nfiona你是什么意思？您的小提琴似乎工作正常，按钮根据复选框显示/隐藏values@Daniel这是别人的把戏，我试图在我的项目中实现它。对不起，我应该澄清一下。从上面的georgeawg找到了解决方案。谢谢
app.controller("productCatalogController", ["$scope", "$http", "$compile", "$timeout", 
function($scope, $http, $compile, $timeout) { ... }



app.directive('button', function() {
return {
    restrict: 'E',
    scope: {
        'ngModel': '='
    },
    link: function(scope, element, attr, ctrl) {
        if (!element.parent('[data-toggle="buttons-checkbox"].btn-group').length) {
            return;
        }

        scope.$watch('ngModel', function(newValue, oldValue) {
            element.toggleClass('active', ctrl.$viewValue);

        });

        element.bind('click', function(e) {
            scope.$apply(function(scope) {
                ctrl.$setViewValue(!ctrl.$viewValue);
            });
            e.stopPropagation();
        });
     }
    }

 });

'require': 'ngModel'