Angularjs 未检查角度指令_Angularjs

Angularjs 未检查角度指令

angularjs

Angularjs 未检查角度指令,angularjs,Angularjs,如何根据“bindto”属性选中或不选中以下复选框？我尝试了element.checked=true，但它没有选中复选框。有什么建议吗 directive('slideToggle', function () { return { replace: true, restrict: 'E', scope: { bindto: '=' }, template: '<input typ

如何根据“bindto”属性选中或不选中以下复选框？我尝试了

element.checked=true

，但它没有选中复选框。有什么建议吗

directive('slideToggle', function () {
    return {
        replace: true,
        restrict: 'E',
        scope: {
            bindto: '='
        },
        template: '<input type="checkbox" name=""/>',
        link: function (scope, element, attrs) {
            console.log(scope); //shows scope.bindto as "true"
            console.log(scope.bindto); //undefined
        }
    }
}).

指令（'slideToggle'，函数（）{ 返回{ 替换：正确，限制：'E'，范围：{ bindto:“=” }, 模板：“”，链接：函数（范围、元素、属性）{ console.log（scope）；//将scope.bindto显示为“true” console.log（scope.bindto）；//未定义 } } }). 用法：

bindto最初未定义，因为该指令在父控制器更新作用域之前链接。您需要倾听范围中的更改：

link: function (scope, element, attrs) {
    scope.$watch("bindto", function (newValue) {
        console.log(scope.bindto); //undefined
    });
}

它在控制台中的“scope”上显示为“true”，因为您点击“scope”对象所花的时间足够长，可以对其进行更新

bindto最初是未定义的，因为该指令在父控制器更新作用域之前链接。您需要倾听范围中的更改：

link: function (scope, element, attrs) {
    scope.$watch("bindto", function (newValue) {
        console.log(scope.bindto); //undefined
    });
}

它在控制台中的“scope”上显示为“true”，因为您点击“scope”对象所花的时间足够长，可以对其进行更新

您应该在复选框上使用ng model属性查看更新的代码

  <body ng-controller="test" >
          <input ng-model="myItem.active" />
       <slide-toggle bindto="myItem.active"></slide-toggle>
          <script>
              var app = angular.module('customControl', [])
              app.controller('test', function ($scope) {
                  $scope.userContent = 'hello';
                  $scope.myItem = { active: true };


              });

              app.directive('slideToggle', function () {
                  return {
                      replace: true,
                      restrict: 'E',
                      scope: {
                          bindto: '=bindto'
                      },
                      template: '<input type="checkbox" ng-model= "bindto"/>',
                      link: function (scope, element, attrs) {

                      }
                  }
              })


var app=angular.module（'customControl'，[]）
应用程序控制器（'测试'，功能（$范围）{
$scope.userContent='hello'；
$scope.myItem={active:true}；
});
应用指令（'slideToggle'，函数（）{
返回{
替换：正确，
限制：'E'，
范围：{
bindto:'=bindto'
},
模板：“”，
链接：函数（范围、元素、属性）{
}
}
})

您应该在复选框上使用ng model属性查看更新的代码

  <body ng-controller="test" >
          <input ng-model="myItem.active" />
       <slide-toggle bindto="myItem.active"></slide-toggle>
          <script>
              var app = angular.module('customControl', [])
              app.controller('test', function ($scope) {
                  $scope.userContent = 'hello';
                  $scope.myItem = { active: true };


              });

              app.directive('slideToggle', function () {
                  return {
                      replace: true,
                      restrict: 'E',
                      scope: {
                          bindto: '=bindto'
                      },
                      template: '<input type="checkbox" ng-model= "bindto"/>',
                      link: function (scope, element, attrs) {

                      }
                  }
              })


var app=angular.module（'customControl'，[]）
应用程序控制器（'测试'，功能（$范围）{
$scope.userContent='hello'；
$scope.myItem={active:true}；
});
应用指令（'slideToggle'，函数（）{
返回{
替换：正确，
限制：'E'，
范围：{
bindto:'=bindto'
},
模板：“”，
链接：函数（范围、元素、属性）{
}
}
})

模板是否应该有bindTo camelcase和指令bindTo all lowercase？模板是否应该有bindTo camelcase和指令bindTo all lowercase？这是正确的，我还需要使用@ajay建议的

ng model

，这是正确的，我还需要使用@Ajay建议的

ng模型