angularjsjs require : 'ngModel'

来源：互联网发布：手机自动截图软件编辑：程序博客网时间：2024/05/20 17:09

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="angular.min.js"></script>
       <script src="bootstrap.min.js"></script>
       <script type="text/javascript">
           var myapp = angular.module("myapp", []);
            myapp.controller("MyController", ['$scope', function($scope) {
                $scope.name = "mario";
                $scope.age = "13";
           }]);
           myapp.directive("cust", function() {
                return {
                   restrict : 'AE',
                   require : 'ngModel',
                   replace : true,
                   scope : {
                       model : '@atts'
                   },
                   template : '<div ng-click="change()">{{model}}' +
                               '</div>',
                   link : function(scope, elem, attrs, ctrl) {
                       scope.change = function() {
                           alert(ctrl.$viewValue);
                           ctrl.$setViewValue(scope.model + '123');
                       };
                   }
                }
           });
       </script>
       <style type="text/css">
       </style>
    </head>
    <body ng-app="myapp">
        <div class="container" ng-controller="MyController">
            <cust ng-model="name" atts="{{name}}"></cust>
            <cust ng-model="age" atts="{{age}}"></cust>
        </div>
    </body>

</html>

可以看到ｃｕｓｔ各自ｍｏｄｅｌ值不干扰．

0 0