分离文件中的 AngularJs 1.X 自定义指令不起作用

问：

嗨，我正在尝试将自定义指令的代码分离到不同的文件以管理复选框，但不起作用，而且当我使用 devtools 调试时似乎没有加载，我无法看到这个新文件。

不是 .js

(function () {
    'use strict';

    var sn = angular.module('notApp');
    sn.controller('notController', ['$scope', '$window', '$timeout', 'dataContext', notController]);

    function notController($scope, $window, $timeout, dataContext) {
    }

    sn.directive('checkList', function () {
        return {

        };
    });

})();

不是应用.js

(function () {
    'use strict';
    angular.module('templates-notHtml', []); 
    angular.module('notApp', [
        'templates-notHtml'
    ]);
})();

notDataContext.js

(function () {
    'use strict';

    var sn = angular.module('notApp');

    var dataContext = sn.service('dataContext', ['$http', '$window', '$rootScope', dataContextFunction]);

    function dataContextFunction($http, $window, $rootScope) {

        this.getPeriods = function () {
            return $http({
                method: 'GET',
                url: '..........'
            }).then(function (success) {
                return success;
            });
        };
    }
})();

不是 .html

<div ng-app="notApp">
    <div id="sn" data-ng-controller="notController" class="mainDiv">
    </div>
</div>

<script src="not.js"></script>

这样，指令工作正常，但是当我将指令分离到另一个文件时，例如自定义指令.js：

自定义指令：.js

var sn = angular.module('notApp');

sn.directive('checkList', function () {
    return {}
};
});

然后添加 customDirectives 的脚本引用.js in not.html如下所示：

不是 .html

<div ng-app="notApp">
    <div id="sn" data-ng-controller="notController" class="mainDiv">
    </div>
</div>

<script src="not.js"></script>
<script src="customDirectives.js"></script>

以这种方式停止工作，而且我也看不到 Chrome 中加载的自定义指令 .js。

知道我做错了什么吗？